:root {
  color-scheme: light;
  --desktop: #008080;
  --face: #c0c0c0;
  --shadow: #808080;
  --dark-shadow: #404040;
  --light: #ffffff;
  --ink: #000000;
  --title: #000080;
  --title2: #1084d0;
}

/* Authentic Encarta 95 fonts, decompressed from the CD's KWAJ-LZH
   distribution archives via tools/kwaj_expand.py.
   IMPORTANT: MSREF1/MSREF2 are NOT body-text fonts — they are Encarta's
   PHONETIC pronunciation fonts where every letter slot encodes a syllable
   with pronunciation diacritics baked in (used for spelling cues like
   "Cleveland (KLEV-luhnd)"). They render as garbled text if used for
   regular body copy. Available for opt-in use on phonetic spans only.
   ARIAL is genuine Win95 Arial (matches the system font); SYMBOL is the
   Greek/math glyph font for science articles. */
@font-face {
  font-family: "Encarta Phonetic 1";
  src: url("data/fonts/MSREF1.TTF") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Encarta Phonetic 2";
  src: url("data/fonts/MSREF2.TTF") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Encarta Arial";
  src: url("data/fonts/ARIAL.TTF") format("truetype");
  /* The bundled ARIAL.TTF (extracted from the CD's KWAJ) is Arial Regular
     only. Without `font-weight: 400` Chrome treats this face as a match
     for ANY requested weight, so <strong>Aare,</strong> would render at
     the same weight as surrounding body text. Pinning to 400 forces
     <strong>/bold runs to cascade to the next font in the family stack
     (system Arial), which DOES carry a real Bold face. */
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Encarta Symbol";
  src: url("data/fonts/SYMBOL.TTF") format("truetype");
  font-display: swap;
}
/* Opt-in classes: use for phonetic/Greek/symbol spans inside article bodies. */
.encarta-phonetic { font-family: "Encarta Phonetic 1", Georgia, serif; }
.encarta-symbol   { font-family: "Encarta Symbol", "Symbol", serif; }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--desktop);
  color: var(--ink);
  font: 12px/1.35 "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif;
  letter-spacing: 0;
}

button,
input {
  font: inherit;
}

.shell {
  width: min(1180px, calc(100vw - 24px));
  height: min(760px, calc(100vh - 24px));
  margin: 12px auto;
  display: grid;
  grid-template-rows: 22px 24px 38px 1fr 22px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  box-shadow: 1px 1px 0 #000;
}

.titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 3px 2px 6px;
  color: #fff;
  background: linear-gradient(90deg, var(--title), var(--title2));
  font-weight: 700;
}

.window-controls {
  display: flex;
  gap: 2px;
}

.window-controls span {
  width: 16px;
  height: 14px;
  display: block;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
}

.menubar,
.toolbar,
.statusbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--shadow);
}

.menubar button {
  min-width: 44px;
  height: 18px;
  background: transparent;
  border: 0;
  text-align: left;
}

.toolbar {
  gap: 6px;
}

.toolbar button,
.toolbar input {
  height: 24px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
}

.toolbar button {
  min-width: 66px;
}

.toolbar button:active,
.toolbar button.is-active {
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
  padding: 2px 5px 0 7px;
}

.toolbar input {
  width: min(340px, 34vw);
  margin-left: auto;
  padding: 2px 6px;
  background: #fff;
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 8px;
  padding: 8px;
}

.sidebar,
.content {
  min-height: 0;
  background: var(--face);
  border: 2px solid;
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.sidebar {
  padding: 10px;
  overflow: auto;
}

.sidebar h1 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1;
}

dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  margin: 0 0 14px;
}

dt {
  color: #202020;
}

dd {
  margin: 0;
  font-weight: 700;
}

.status-box {
  display: grid;
  gap: 4px;
  padding: 8px;
  background: #fff;
  border: 2px solid;
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.status-box--media {
  margin-top: 8px;
}

.status-box--media dl {
  margin: 0;
}

.content {
  display: grid;
  grid-template-rows: 34px 1fr 34px;
}

.content__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-bottom: 1px solid var(--shadow);
}

.content__header h2 {
  margin: 0;
  font-size: 14px;
}

.asset-grid {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-content: start;
  gap: 8px;
  padding: 8px;
  background: #fff;
}

.asset-grid[hidden] {
  display: none;
}

.home-view {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 10px;
  background: #d9d9d9;
}

.home-view[hidden] {
  display: none;
}

.shell.home-mode {
  width: 800px;
  height: 600px;
  margin: 0;
  grid-template-rows: 1fr;
  background: var(--desktop) url("references/original/SteveEncarta95/encarta-splash-screen_0021s.png") 0 0 / 800px 600px no-repeat;
  image-rendering: pixelated;
  border: 0;
  box-shadow: none;
  overflow: hidden;
  position: relative;
}

body.home-world-panel-mode .shell.home-mode {
  background-image: url("references/original/SteveEncarta95/splash-woe-dialog-intro_0024s.png");
}

body.home-getting-panel-mode .shell.home-mode {
  background-image: url("references/original/SteveEncarta95/splash-getting-around-dialog-intro_0086s.png");
}

body.home-research-panel-mode .shell.home-mode {
  background-image: url("references/original/SteveEncarta95/splash-rr-dialog-intro_0124s.png");
}

.shell.home-mode .titlebar,
.shell.home-mode .menubar,
.shell.home-mode .toolbar,
.shell.home-mode .sidebar,
.shell.home-mode .statusbar,
.shell.home-mode .content__header,
.shell.home-mode .asset-grid,
.shell.home-mode .loadbar,
.shell.home-mode .reader-view,
.shell.home-mode .ui-board {
  display: none;
}

body.home-world-panel-mode .home-tour-panel,
body.home-getting-panel-mode .home-tour-panel,
body.home-research-panel-mode .home-tour-panel {
  display: none;
}

.shell.reader-mode {
  width: 640px;
  height: 480px;
  margin: 0;
  grid-template-rows: 1fr;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.shell.reader-mode .titlebar {
  display: none;
}

.shell.reader-mode .toolbar,
.shell.reader-mode .sidebar,
.shell.reader-mode .statusbar,
.shell.reader-mode .content__header,
.shell.reader-mode .asset-grid,
.shell.reader-mode .loadbar,
.shell.reader-mode .home-view,
.shell.reader-mode .menubar,
.shell.reader-mode .ui-board {
  display: none;
}

.shell.mindmaze-mode {
  width: 640px;
  height: 480px;
  margin: 0;
  grid-template-rows: 16px 14px 1fr;
  background: #000;
  overflow: hidden;
}

.shell.mindmaze-mode .titlebar {
  height: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: #34302d;
  border: 0;
  border-bottom: 1px solid #201c19;
  box-shadow: inset 1px 1px 0 #5a524a;
  color: #bdb5a7;
}

.shell.mindmaze-mode .titlebar__label {
  color: transparent;
  position: relative;
  text-align: center;
  font: 13px/16px Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

.shell.mindmaze-mode .titlebar__label::after {
  content: "MICROSOFT  ENCARTA";
  position: absolute;
  inset: 0;
  color: #bdb5a7;
  text-shadow: 1px 1px 0 #1b1714;
  white-space: pre;
}

.shell.mindmaze-mode .window-controls {
  display: flex;
  gap: 2px;
  padding-right: 4px;
}

.shell.mindmaze-mode .window-controls span {
  width: 11px;
  height: 11px;
  border: 1px solid #8f8576;
  background: #423b34;
  box-shadow: inset 1px 1px 0 #c8bda8;
}

.shell.mindmaze-mode .toolbar,
.shell.mindmaze-mode .sidebar,
.shell.mindmaze-mode .content__header,
.shell.mindmaze-mode .asset-grid,
.shell.mindmaze-mode .loadbar,
.shell.mindmaze-mode .home-view,
.shell.mindmaze-mode .reader-view,
.shell.mindmaze-mode .ui-board {
  display: none;
}

.shell.mindmaze-mode .statusbar {
  display: none;
}

.shell.mindmaze-mode .menubar {
  height: 14px;
  position: relative;
  display: block;
  padding: 0;
  background: #9abb9e;
  border: 0;
  color: #fff;
  font: 10px/14px "MS Sans Serif", Tahoma, sans-serif;
}

.shell.mindmaze-mode .menubar button {
  display: none;
}

.shell.mindmaze-mode .menubar::before {
  content: "▼  MindMaze";
  position: absolute;
  left: 8px;
  top: 0;
  text-shadow: 1px 1px 0 #6f8270;
}

.shell.mindmaze-mode .menubar::after {
  content: "| Close";
  position: absolute;
  right: 8px;
  top: 0;
  text-shadow: 1px 1px 0 #6f8270;
}

.shell.mindmaze-mode .workspace {
  display: block;
  height: 450px;
  padding: 0;
}

.shell.mindmaze-mode .content {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
  background: #000;
  overflow: hidden;
}

.shell.mindmaze-mode #mindmaze-board {
  display: grid;
  width: 640px;
  height: 450px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0;
}

.shell.mindmaze-mode .mindmaze-panel {
  display: none;
}

body.mindmaze-reference-mode {
  width: 554px;
  height: 416px;
  min-height: 416px;
  overflow: hidden;
  background: #000;
}

body.mindmaze-reference-mode .shell.mindmaze-mode {
  display: block;
  width: 554px;
  height: 416px;
  margin: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 554px 416px;
  border: 0;
  box-shadow: none;
}

body.mindmaze-reference-mode .shell.mindmaze-mode > * {
  visibility: hidden;
}

body.mindmaze-castle-splash-mode .shell.mindmaze-mode {
  background-image: url("extracted/ne-resources/mm95-png/MM95.EXE_2_163.png");
}

body.mindmaze-area-cauldron-mode .shell.mindmaze-mode {
  background-image: url("references/original/mindmaze/area-cauldron.png");
}

body.mindmaze-area-doors-mode .shell.mindmaze-mode {
  background-image: url("references/original/mindmaze/area-doors.png");
}

body.mindmaze-castle-name-entry-mode .shell.mindmaze-mode {
  background-image: url("references/original/mindmaze/castle-name-entry.png");
}

body.mindmaze-feature-intro-mode .shell.mindmaze-mode {
  background-image: url("references/original/mindmaze/feature-intro.png");
}

body.mindmaze-area-list-mode .shell.mindmaze-mode {
  background-image: url("references/original/mindmaze/area-list.png");
}

body.mindmaze-castle-question-mode .shell.mindmaze-mode {
  background-image: url("references/original/mindmaze/castle-question.png");
}

body.mindmaze-cauldron-question-mode .shell.mindmaze-mode {
  background-image: url("references/original/mindmaze/cauldron-question.png");
}

body.mindmaze-invalid-property-error-mode .shell.mindmaze-mode {
  background-image: url("references/original/mindmaze/invalid-property-error.png");
}

body.mindmaze-text-cave-passage-mode .shell.mindmaze-mode {
  background-image: url("references/original/mindmaze/text-cave-passage.png");
}

body.mindmaze-text-popup-mode .shell.mindmaze-mode {
  background-image: url("references/original/mindmaze/text-popup.png");
}

.shell.reader-mode .workspace {
  display: block;
  height: 480px;
  padding: 0;
  overflow: visible;
}

.shell.reader-mode .content {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  background: transparent;
  overflow: visible;
}

.shell.reader-mode #reader-view {
  display: grid;
  width: 100%;
  height: 480px;
  position: fixed;
  left: 0;
  top: 0;
  overflow: visible;
  z-index: 5;
}

body.reader-mode .reader-encarta-titlebar,
body.reader-mode .reader-commandbar,
body.reader-mode .reader-topic-title,
body.reader-mode .reader-index,
body.reader-mode .reader-article {
  position: absolute;
}

body.reader-mode .reader-encarta-titlebar {
  left: 0;
  top: 0;
  width: 640px;
  height: 18px;
}

body.reader-mode .reader-commandbar {
  left: 0;
  top: 18px;
  width: 640px;
  height: 18px;
}

body.reader-mode .reader-topic-title {
  left: 0;
  top: 36px;
  width: 640px;
  height: 38px;
}

body.reader-mode .reader-index {
  position: fixed;
  left: 0;
  top: 74px;
  width: 154px;
  height: 406px;
  z-index: 6;
}

body.reader-mode .reader-article {
  position: fixed;
  left: 154px;
  top: 74px;
  width: 486px;
  height: 406px !important;
  overflow: visible !important;
  z-index: 6;
}

body.reader-mode .reader-article__body {
  position: fixed;
  left: 154px;
  top: 74px;
  width: 486px;
  height: 406px !important;
  z-index: 7;
}

/* Timeline overlay in reader-mode: fixed-position to span the full inner
   Encarta window beneath the command bar, matching Steve's timeline-feature
   frames where the panel covers the topic title + Views index + article body. */
body.reader-mode #timeline-overlay {
  position: fixed;
  left: 0;
  top: 36px;
  width: 640px;
  height: 444px;
  margin: 0;
  z-index: 8;
}

body.reader-reference-mode .shell.reader-mode {
  background-repeat: no-repeat;
  background-position: -79px -60px;
  background-size: 800px 600px;
}

body.reader-reference-mode .shell.reader-mode > * {
  visibility: hidden;
}

body.reader-solitaire-mode .shell.reader-mode {
  background-image: url("references/original/SteveEncarta95/article-aare-river_0275s.png");
}

body.reader-article-features-menu-mode .shell.reader-mode {
  background-image: url("references/original/SteveEncarta95/article-grover-cleveland-category-menu-open_0243s.png");
}

body.reader-article-pinpointer-mode .shell.reader-mode {
  background-image: url("references/original/SteveEncarta95/article-grover-cleveland-pinpointer-panel_0255s.png");
}

body.reader-article-spell-check-mode .shell.reader-mode {
  background-image: url("references/original/SteveEncarta95/media-gallery-pinpointer-no-results_0564s.png");
}

body.reader-article-with-image-mode .shell.reader-mode {
  background-image: url("references/original/SteveEncarta95/article-michigan-lake_0522s.png");
}

.shell.home-mode .workspace {
  display: block;
  height: 100%;
  padding: 0;
}

.shell.home-mode .content {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.shell.home-mode #home-view {
  position: fixed;
  inset: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.home-splash {
  position: relative;
  width: 100%;
  height: 100%;
}

body.home-mode .home-splash {
  position: absolute;
  inset: 60px auto auto 80px;
  width: 640px;
  height: 480px;
}

.home-splash__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

body.home-mode .home-splash__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

body.reader-mode {
  width: 100vw;
  height: 100vh;
  min-height: 480px;
  overflow: hidden;
  background: var(--desktop);
}

body.mindmaze-mode {
  width: 640px;
  height: 480px;
  min-height: 480px;
  overflow: hidden;
  background: #000;
}

.home-splash__hotspot {
  position: absolute;
  z-index: 1;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.home-splash__hotspot:focus-visible {
  outline: 1px dotted #fff;
  outline-offset: -2px;
}

.home-splash__hotspot--enter {
  left: 92.2%;
  top: 74.6%;
  width: 7.8%;
  height: 14.0%;
}

.home-splash__hotspot--world {
  left: 52.2%;
  top: 83.0%;
  width: 14.2%;
  height: 12.8%;
}

.home-splash__hotspot--getting {
  left: 66.2%;
  top: 83.0%;
  width: 15.0%;
  height: 12.8%;
}

.home-splash__hotspot--research {
  left: 81.8%;
  top: 83.0%;
  width: 17.0%;
  height: 12.8%;
}

.home-tour-panel {
  position: absolute;
  z-index: 2;
  left: 14.5%;
  top: 20%;
  width: 70.8%;
  height: 62.5%;
  display: grid;
  grid-template-rows: 20px 1fr;
  color: #f8f5ee;
  background: #2d2626;
  border: 1px solid #111;
  box-shadow: 1px 1px 0 #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 80ms steps(2, end);
}

.home-splash__hotspot--world:hover ~ .home-tour-panel--world,
.home-splash__hotspot--world:focus-visible ~ .home-tour-panel--world,
.home-tour-panel--world:hover,
.home-tour-panel--world:focus-within,
body.home-world-panel-mode .home-tour-panel--world,
.home-splash__hotspot--getting:hover ~ .home-tour-panel--getting,
.home-splash__hotspot--getting:focus-visible ~ .home-tour-panel--getting,
.home-tour-panel--getting:hover,
.home-tour-panel--getting:focus-within,
body.home-getting-panel-mode .home-tour-panel--getting,
.home-splash__hotspot--research:hover ~ .home-tour-panel--research,
.home-splash__hotspot--research:focus-visible ~ .home-tour-panel--research,
.home-tour-panel--research:hover,
.home-tour-panel--research:focus-within,
body.home-research-panel-mode .home-tour-panel--research {
  opacity: 1;
  pointer-events: auto;
}

.home-tour-panel__titlebar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 20px;
  padding: 0 5px 0 7px;
  color: #fff;
  background: #6763a0;
  border-bottom: 1px solid #4d4975;
  font-size: 12px;
}

.home-tour-panel__titlebar span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-tour-panel__titlebar button {
  flex: 0 0 auto;
  height: 18px;
  padding: 0 4px;
  color: #fff;
  background: transparent;
  border: 0;
  border-left: 1px solid #d8d5ee;
  font: inherit;
}

.home-tour-panel__body {
  min-height: 0;
  display: grid;
  grid-template-columns: 25.5% 1fr;
  grid-template-rows: 1fr 34px;
}

.home-tour-panel__menu {
  min-width: 0;
  grid-row: 1 / 2;
  display: grid;
  align-content: start;
  gap: 0;
  padding: 32px 8px 6px 11px;
  background: #2d2626;
}

.home-tour-panel__menu button {
  min-width: 0;
  height: 18px;
  padding: 0 3px;
  color: #eee7dc;
  background: transparent;
  border: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.home-tour-panel__menu button:hover,
.home-tour-panel__menu button:focus-visible,
.home-tour-panel__menu button.is-active {
  color: #fff;
  background: #918b77;
  outline: 0;
}

.home-tour-panel__autoplay {
  align-self: center;
  justify-self: start;
  width: 76%;
  height: 20px;
  margin-left: 9%;
  color: #ddd6c6;
  background: #918b77;
  border: 0;
  font-size: 10px;
}

.home-tour-panel__page {
  min-width: 0;
  min-height: 0;
  grid-row: 1 / 3;
  position: relative;
  overflow: hidden;
  color: #202020;
  background: #d8d7c8;
  padding: 22px 26px 18px;
}

/* Data-driven tour pages: title at top-right, body text fills the rest. */
.home-tour-panel__page[data-tour-page] {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 8px;
}

.home-tour-panel__heading {
  margin: 0;
  color: #243d6f;
  font: 700 32px/0.95 Georgia, "Times New Roman", serif;
  text-align: right;
}

.home-tour-panel__suffix {
  margin: -4px 0 4px;
  color: #91353a;
  font: 700 16px/1 Georgia, "Times New Roman", serif;
  text-align: right;
}

.home-tour-panel__page p.home-tour-panel__body {
  margin: 0;
  align-self: start;
  font: 11px/1.35 "MS Sans Serif", Tahoma, sans-serif;
  color: #202020;
  max-width: 100%;
}

/* New structure: ensure heading sits in upper-right corner, body fills below */
.home-tour-panel__page[data-tour-page] {
  grid-template-rows: auto auto 1fr;
  padding: 16px 18px 16px;
}

.home-tour-panel__page[data-tour-page] .home-tour-panel__heading {
  font-size: 28px;
  line-height: 0.95;
}

/* Per-state media — soft tinted backgrounds picked to match the reference
   frames' impression. Real bitmaps could replace these later. */
.home-tour-panel__page[data-tour-media="world-intro"]     { background: linear-gradient(135deg, #dce4e7, #c8d2d1 50%, #edf0ee); }
.home-tour-panel__page[data-tour-media="articles"]        { background: linear-gradient(135deg, #f0eadd, #d8c9a8); }
.home-tour-panel__page[data-tour-media="sights"]          { background: linear-gradient(135deg, #e5e1d2, #c5d0d0); }
.home-tour-panel__page[data-tour-media="interactivities"] { background: linear-gradient(135deg, #e8e8d8, #c0c8b8); }
.home-tour-panel__page[data-tour-media="new1995"]         { background: linear-gradient(135deg, #f0e8d0, #d0b888); }
.home-tour-panel__page[data-tour-media="international"]   { background: linear-gradient(135deg, #d8e0e8, #a8b8c8); }
.home-tour-panel__page[data-tour-media="movies"]          { background: linear-gradient(135deg, #d8d0c0, #807868); }
.home-tour-panel__page[data-tour-media="atlas"]           { background:
    radial-gradient(circle at 60% 55%, rgba(40,60,120,0.18) 0 35%, transparent 36%),
    linear-gradient(135deg, #cfd6dc, #98a0a8); }
.home-tour-panel__page[data-tour-media="timeline"]        { background: linear-gradient(135deg, #f0e8c8, #b0a070); }
.home-tour-panel__page[data-tour-media="mindmaze"]        { background: linear-gradient(135deg, #d8c0a0, #604838); }
.home-tour-panel__page[data-tour-media="getting-intro"]   { background: linear-gradient(135deg, #dce0c8, #b8c0a8); }
.home-tour-panel__page[data-tour-media="action"]          { background: linear-gradient(135deg, #e8e0c8, #c0b890); }
.home-tour-panel__page[data-tour-media="find"]            { background: linear-gradient(135deg, #e0e8d0, #a8b890); }
.home-tour-panel__page[data-tour-media="category"]        { background: linear-gradient(135deg, #e8d8c8, #b89870); }
.home-tour-panel__page[data-tour-media="related"]         { background: linear-gradient(135deg, #d8d8e0, #a0a0b8); }
.home-tour-panel__page[data-tour-media="browse"]          { background: linear-gradient(135deg, #d8d4c0, #a8a48c); }
.home-tour-panel__page[data-tour-media="custom"]          { background: linear-gradient(135deg, #e0d8c8, #b0a890); }
.home-tour-panel__page[data-tour-media="help"]            { background: linear-gradient(135deg, #d8e0e0, #a8b8b8); }
.home-tour-panel__page[data-tour-media="research-intro"]  { background: linear-gradient(135deg, #f0e8d0, #c8a878); }
.home-tour-panel__page[data-tour-media="topics"]          { background: linear-gradient(135deg, #e8d8b8, #b88848); }
.home-tour-panel__page[data-tour-media="copy"]            { background: linear-gradient(135deg, #e0d8c0, #a89070); }
.home-tour-panel__page[data-tour-media="further"]         { background: linear-gradient(135deg, #d8c8a8, #806040); }
.home-tour-panel__page[data-tour-media="organize"]        { background: linear-gradient(135deg, #d8e0c8, #98a878); }
.home-tour-panel__page[data-tour-media="classroom"]       { background: linear-gradient(135deg, #e0d8b8, #c0a868); }

.home-tour-panel__page--world {
  padding: 31px 24px 18px;
  background:
    radial-gradient(circle at 62% 54%, rgba(255,255,255,0.56) 0 6%, rgba(213,224,228,0.34) 7% 24%, rgba(196,205,202,0.28) 25% 38%, transparent 39%),
    linear-gradient(135deg, #dce4e7, #c8d2d1 50%, #edf0ee);
}

.home-tour-panel__world-mark {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 142px;
}

.home-tour-panel__world-mark span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 0 37%, #efe7c3 38% 48%, transparent 49%),
    radial-gradient(circle at 35% 35%, #7fd5c1 0 19%, #006d70 20% 43%, #0a3f80 44% 60%, #efe7c3 61% 66%, #222 67% 70%, transparent 71%),
    #d7d0a8;
  border: 1px solid #222;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
}

.home-tour-panel__world-mark strong {
  color: #243d6f;
  font-size: 38px;
  line-height: 0.92;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

.home-tour-panel__feature-row {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 18px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.7fr;
  gap: 8px;
  align-items: end;
  color: #29305c;
}

.home-tour-panel__feature-row div {
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid rgba(67, 73, 102, 0.4);
  font-size: 12px;
}

.home-tour-panel__feature-row strong {
  display: block;
  color: #91353a;
  font-size: 15px;
}

.home-tour-panel__page--getting {
  padding: 0 0 18px;
  background: #dcdbc9;
}

.home-tour-panel__page--research {
  padding: 22px 26px 24px;
  background:
    radial-gradient(ellipse at 65% 60%, rgba(255, 248, 232, 0.55) 0%, transparent 65%),
    linear-gradient(135deg, #e7dec9 0%, #c8b88f 100%);
}

.home-tour-panel__research-mark {
  position: absolute;
  right: 9%;
  top: 18%;
  color: #1a2c5b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 0.95;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.home-tour-panel__research-pencil {
  position: absolute;
  left: 16%;
  top: 56%;
  width: 56%;
  height: 22px;
  display: grid;
  grid-template-columns: 16px 4px 1fr 22px 8px;
  transform: rotate(-22deg);
  transform-origin: left center;
  filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.18));
  pointer-events: none;
}

.home-tour-panel__research-pencil-eraser {
  background: linear-gradient(180deg, #ffd4c3, #d97c5a 60%, #a14c30);
  border: 1px solid #6c2e1a;
  border-right: 0;
  border-radius: 4px 0 0 4px;
}

.home-tour-panel__research-pencil-ferrule {
  background:
    repeating-linear-gradient(180deg, #f0bb3f 0 3px, #c98c1c 3px 6px),
    #d29a26;
  border: 1px solid #6c4a13;
  border-left: 0;
  border-right: 0;
}

.home-tour-panel__research-pencil-body {
  background: linear-gradient(180deg, #fff0a8 0%, #ffd84a 35%, #f4b300 60%, #b67d00 100%);
  border: 1px solid #6c4a13;
  border-left: 0;
  border-right: 0;
  position: relative;
}

.home-tour-panel__research-pencil-body::before,
.home-tour-panel__research-pencil-body::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  height: 1px;
  background: rgba(95, 64, 14, 0.45);
}

.home-tour-panel__research-pencil-body::before { top: 30%; }
.home-tour-panel__research-pencil-body::after { bottom: 30%; }

.home-tour-panel__research-pencil-tip {
  background:
    linear-gradient(90deg, transparent 0 6px, #f1c98d 6px 100%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.home-tour-panel__research-pencil-lead {
  background: #1f1611;
  clip-path: polygon(0 50%, 100% 30%, 100% 70%);
}

.home-tour-toolbar {
  height: 30px;
  display: grid;
  grid-template-columns: 1fr 48px 70px 84px 70px 34px;
  border-bottom: 1px solid #878579;
  background: #c7c7b5;
}

.home-tour-toolbar span {
  background: #c3ddc7;
  border: 2px solid;
  border-color: #769276 #f7f7e9 #f7f7e9 #769276;
}

.home-tour-toolbar strong,
.home-tour-toolbar button {
  min-width: 0;
  color: #26221d;
  background: #c0c0b1;
  border: 2px solid;
  border-color: #f3f1e5 #78786d #78786d #f3f1e5;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.home-tour-browse-widget {
  position: absolute;
  right: 72px;
  top: 58px;
  width: 168px;
  height: 54px;
  display: grid;
  grid-template-columns: 72px 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  padding: 5px;
  color: #d8cc6b;
  background: #302826;
  border: 2px solid #6a6255;
  font-size: 12px;
}

.home-tour-browse-widget strong {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  border: 1px solid #938a7a;
  font-weight: 400;
}

.home-tour-browse-widget span {
  color: #95b469;
  border: 1px solid #73766a;
  text-align: center;
}

.home-tour-panel__arrow {
  position: absolute;
  left: 52px;
  top: 35px;
  width: 270px;
  height: 240px;
  opacity: 0.33;
  background: #b7b5a4;
  clip-path: polygon(47% 0, 70% 33%, 58% 33%, 87% 100%, 37% 54%, 27% 72%, 31% 24%);
}

.home-tour-panel__page--getting h2 {
  position: absolute;
  right: 22px;
  bottom: 17px;
  margin: 0;
  color: #4c60a4;
  font-size: 37px;
  line-height: 1;
  font-weight: 700;
}

.home-hero {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(320px, 1.2fr) minmax(0, 0.8fr);
  gap: 10px;
  align-items: stretch;
}

.home-hero__screen,
.home-hero__copy,
.home-panel {
  min-width: 0;
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  box-shadow: 1px 1px 0 #000;
}

.home-hero__screen {
  display: grid;
  place-items: center;
  padding: 10px;
  background: #000;
  min-height: 240px;
}

.home-hero__screen img {
  width: 100%;
  height: 100%;
  max-height: 340px;
  object-fit: contain;
  image-rendering: pixelated;
}

.home-hero__copy {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
}

.home-kicker {
  width: max-content;
  padding: 2px 5px;
  color: #fff;
  background: #000080;
  font-size: 11px;
  font-weight: 700;
}

.home-hero__copy h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
}

.home-hero__copy p {
  margin: 0;
  max-width: 42ch;
  font-size: 13px;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-actions button {
  min-width: 118px;
  height: 24px;
  padding: 0 10px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
}

.home-actions button:active {
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
  padding: 2px 8px 0 12px;
}

.home-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.home-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--shadow);
}

.home-panel__header strong {
  font-size: 12px;
}

.home-panel__header span {
  color: #404040;
}

.home-featured {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.home-featured__item {
  min-width: 0;
  display: grid;
  grid-template-rows: 88px auto auto;
  gap: 5px;
  padding: 6px;
  text-align: left;
  color: #000;
  background: #fff;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
}

.home-featured__item:active {
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.home-featured__item img {
  width: 100%;
  height: 88px;
  object-fit: contain;
  background: #000;
  border: 1px solid var(--shadow);
}

.home-featured__item strong,
.home-featured__item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.home-featured__item strong {
  font-size: 12px;
}

.home-featured__item span {
  color: #404040;
  font-size: 10px;
  line-height: 1.2;
}

.home-stats {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
}

.home-stats dt {
  color: #202020;
}

.home-stats dd {
  font-weight: 700;
}

.loadbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background: #c0c0c0;
  border-top: 1px solid var(--shadow);
}

.loadbar button {
  min-width: 96px;
  height: 22px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
}

.loadbar button:active {
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
  padding: 2px 5px 0 7px;
}

.asset {
  min-width: 0;
  display: grid;
  grid-template-rows: 120px auto;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  cursor: default;
}

.asset:active {
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.asset__preview {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 6px;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.asset__preview img,
.asset__preview video {
  max-width: 100%;
  max-height: 100%;
}

.asset__preview--ui {
  background: #c0c0c0;
}

.asset__preview--ui img,
.ui-board img {
  image-rendering: pixelated;
}

.asset__preview audio {
  width: 100%;
}

.asset__preview--topic {
  place-items: start;
  background: #ffffe8;
  color: #000;
  font-size: 11px;
  line-height: 1.35;
}

.asset__preview--article-media {
  grid-template-rows: 54px 1fr;
  gap: 5px;
}

.asset__media-strip {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.asset__media-strip img {
  width: 100%;
  height: 54px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--shadow);
}

.asset__topic-text {
  min-width: 0;
  overflow: hidden;
}

.asset__body {
  min-width: 0;
  padding: 6px;
}

.asset h3 {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.asset p {
  margin: 0;
  color: #202020;
  overflow-wrap: anywhere;
}

.ui-board {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(320px, 420px);
  gap: 8px;
  padding: 8px;
  background: #fff;
}

.ui-board[hidden] {
  display: none;
}

.reader-view {
  min-height: 0;
  overflow: hidden;
  display: grid;
  position: relative;
  grid-template-columns: 154px 1fr;
  grid-template-rows: 18px 18px 38px 1fr;
  gap: 0;
  padding: 0;
  background: #f5f0ec;
}

.reader-view[hidden] {
  display: none;
}

.reader-index,
.reader-article {
  min-height: 0;
  background: transparent;
  border: 0;
}

.reader-encarta-titlebar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 22px 1fr 46px;
  align-items: center;
  position: relative;
  color: #d6c7bc;
  background: #332a2a;
  border-top: 1px solid #000;
  border-bottom: 1px solid #2a241f;
  box-shadow: inset 0 1px 0 #554943;
  font-size: 9px;
  line-height: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* quick-wins W3 — Reader title-bar book icon.  UI_AUDIT F2.3 flagged
   this slot as showing a "tiny generic tile-icon" (placeholder gray
   box) rather than the Microsoft Encarta blue/yellow book icon Steve
   has.  The icon already lives at extracted/ne-resources/encart95-png/
   ENCART95.EXE_2_ENCSMALL_BAR.png (23x18, Encarta globe/book) — we just
   weren't loading it. */
.reader-encarta-titlebar span {
  width: 16px;
  height: 13px;
  margin-left: 4px;
  background: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCSMALL_BAR.png") no-repeat center center;
  background-size: contain;
  image-rendering: pixelated;
}

.reader-encarta-titlebar strong {
  justify-self: center;
  grid-column: 2;
  font-weight: 400;
}

.reader-encarta-titlebar::after {
  content: "";
  justify-self: end;
  width: 41px;
  height: 13px;
  margin-right: 4px;
  background:
    linear-gradient(#958b7c, #958b7c) 0 0 / 12px 13px no-repeat,
    linear-gradient(#958b7c, #958b7c) 15px 0 / 12px 13px no-repeat,
    linear-gradient(#958b7c, #958b7c) 30px 0 / 12px 13px no-repeat;
  box-shadow:
    inset 1px 1px 0 #d4ccb8,
    15px 0 0 transparent,
    30px 0 0 transparent;
}

.reader-commandbar {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  /* 22 icon + (148 area + 229 cat + 43 find + 62 back + 70 feat + 48 tools + 18 info) = 640.
     Right-side widths preserved from pre-icon layout so text labels still fit. */
  grid-template-columns: 22px 148px 229px 43px 62px 70px 48px 18px;
  align-items: stretch;
  min-width: 0;
  background: #cfc8cf;
  border-bottom: 1px solid #404040;
}

.reader-commandbar button.reader-commandbar__app-icon {
  width: 22px;
  height: 18px;
  padding: 0;
  background: #cfc8cf url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCSMALL_BAR.png") no-repeat center center;
  background-size: auto;
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  cursor: pointer;
}

.reader-commandbar__app-icon:hover,
.reader-commandbar__app-icon[aria-expanded="true"] {
  background-color: #b8b0b8;
  border-color: #404040 #fff #fff #404040;
}

.reader-app-menu {
  position: absolute;
  left: 0;
  top: 18px;
  z-index: 50;
  width: 106px;
  padding: 0;
  background: #000;
  border: 1px solid #000;
  box-shadow: none;
  display: grid;
  font: 11px/16px "MS Sans Serif", Tahoma, Arial, sans-serif;
}

.reader-app-menu[hidden] {
  display: none;
}

.reader-app-menu button {
  height: 18px !important;
  padding: 1px 8px 2px 17px !important;
  background: #000 !important;
  color: #e3e4db !important;
  border: 0 !important;
  text-align: left;
  white-space: nowrap;
  font: inherit;
  cursor: pointer;
}

.reader-app-menu button:hover,
.reader-app-menu button:focus,
.reader-app-menu[data-keyboard-open="true"] button:first-of-type,
.reader-app-menu button:focus-visible {
  background: #948b74 !important;
  color: #fff !important;
  outline: 0;
}

.reader-app-menu__separator {
  height: 0;
  margin: 3px 0;
  border-top: 1px solid #e3e4db;
  border-bottom: 0;
}

.reader-commandbar button,
.reader-commandbar__find {
  min-width: 0;
  height: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px 2px;
  color: #000;
  background: #cfc8cf;
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
}

.reader-commandbar__section {
  justify-content: flex-start;
  color: #000 !important;
  background: #88aa8c !important;
  font-weight: 700;
}

.reader-commandbar__area {
  background-color: #d4c873 !important;
  background-image: none !important;
  justify-content: flex-start;
  padding: 1px 6px 2px !important;
  font-size: 11px;
}

/* Steve's article frames show the area pane as plain text on the gold
   background (e.g. "▾ Art, Language, & Literature"), not the CAT_*.png
   illustration banner. Keep the CAT bitmaps available for other surfaces
   (category menu, splash) and let the pane render the area text instead. */

/* CAT_*.png banners (8ae167d) are NOT used in the article toolbar per Steve
   frames — they appear elsewhere (category menu / splash). Per-area
   background-image rules removed; area pane now shows plain text on gold. */

.reader-commandbar__section::before {
  content: "";
  width: 0;
  height: 0;
  margin-right: 3px;
  border-top: 4px solid #000;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.reader-commandbar__section + .reader-commandbar__section {
  background: #88aa8c !important;
}

.reader-commandbar__find input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ▼ down-arrow for the ▼ Features and ▼ Tools panes (dropdown indicator).
   Same CSS-triangle shape as `.reader-commandbar__section::before`. */
.reader-commandbar__features::before,
.reader-commandbar__tools::before {
  content: "";
  width: 0;
  height: 0;
  margin-right: 3px;
  border-top: 4px solid #000;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.reader-commandbar__nav {
  justify-self: center;
  align-self: center;
  width: 32px;
  height: 15px;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  font-size: 0;
  image-rendering: pixelated;
}

.reader-commandbar__nav:hover,
.reader-commandbar__nav:focus-visible {
  background-position: -32px 0 !important;
}

.reader-commandbar__nav:disabled {
  background-position: -64px 0 !important;
  cursor: default;
}

.reader-commandbar__nav:active:not(:disabled) {
  background-position: -96px 0 !important;
}

.reader-commandbar__nav--next {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_NEXT.png") !important;
}

/* Steve frame article-rhine_river-photo-hover-go-back_0329s_6.jpg shows
   "Go Back" as plain sage-olive text — same style as Find / Features / Tools
   panes. Replaces the old ENCORG_BACK.png sprite. */
.reader-commandbar__goback {
  justify-content: center;
  background: #cfc8cf !important;
  color: #1d1d1d !important;
  font-weight: 400;
  font-size: 11px;
}
.reader-commandbar__goback:disabled {
  color: #7d8d78 !important;
  cursor: default;
}

.reader-browse-popover {
  position: absolute;
  z-index: 20;
  right: 18px;
  top: 18px;
  width: 200px;
  height: 70px;
  display: grid;
  grid-template-columns: 90px 1fr 39px;
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  padding: 3px;
  color: #1a1610;
  background: #c7c1ab;
  border: 2px solid;
  border-color: #f0ecdb #4a463f #4a463f #f0ecdb;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
}

.reader-commandbar__tools:hover + .reader-browse-popover,
.reader-commandbar__tools:focus-visible + .reader-browse-popover,
.reader-browse-popover:hover,
.reader-browse-popover:focus-within,
body.reader-browse-panel-mode .reader-browse-popover {
  opacity: 1;
  pointer-events: auto;
}

.reader-commandbar .reader-browse-popover button {
  min-width: 0;
  height: auto;
  padding: 0;
  background-color: #f3eedb;
  background-repeat: no-repeat;
  background-position: 0 center;
  border: 1px solid #6a6255;
  image-rendering: pixelated;
  font-size: 0;
  cursor: pointer;
}

.reader-commandbar .reader-browse-popover__random {
  grid-row: 1 / 3;
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_BROWZ_RANDOM.png");
  background-size: 200% auto;
  background-position: 0 center;
}

.reader-commandbar .reader-browse-popover__random:hover,
.reader-commandbar .reader-browse-popover__random:focus-visible {
  background-position: 100% center;
}

.reader-commandbar .reader-browse-popover__az {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_BROWZ_WALKAZ.png");
  background-size: 300% 100%;
  background-position: 0 center;
}

.reader-browse-popover__az:hover,
.reader-browse-popover__az:focus-visible {
  background-position: 50% center;
}

.reader-commandbar .reader-browse-popover__category {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_BROWZ_WALKCZ.png");
  background-size: 300% 100%;
  background-position: 0 center;
}

.reader-browse-popover__category:hover,
.reader-browse-popover__category:focus-visible {
  background-position: 50% center;
}

.reader-commandbar .reader-browse-popover__close {
  grid-column: 3;
  grid-row: 1 / 3;
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_BROWZ_CLOSE.png");
  background-size: 100% 100%;
  background-position: center top;
}

.reader-browse-popover__close:hover,
.reader-browse-popover__close:focus-visible {
  background-position: center 50%;
}

.reader-commandbar button.reader-commandbar__info {
  justify-content: center;
  padding: 0 !important;
  font-size: 0;
  color: transparent !important;
  background: #cfc8cf url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_INFO_BAR.png") no-repeat center center !important;
  background-size: auto !important;
  border: 1px solid !important;
  border-color: #fff #404040 #404040 #fff !important;
  image-rendering: pixelated;
}

.reader-commandbar__forward {
  display: none !important;
}

.reader-topic-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  padding: 4px 4px 6px;
  color: #fff;
  background: #000;
  font: 20px/1 Georgia, "Times New Roman", serif;
}

.reader-index {
  display: grid;
  grid-template-rows: 20px 1fr 30px;
  padding: 8px 4px 8px 10px;
  background: transparent;
}

.reader-index__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 5px;
  color: #fff;
  background: #4f483f;
  border: 0;
  width: 100%;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.reader-index__header:hover {
  background: #645a4d;
}

.reader-list {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 8px 0 0;
  background: transparent;
  position: relative;
}

/* Views dropdown — opens anchored below the ▼ Views header */
.reader-views-menu {
  position: absolute;
  left: 9px;
  top: 0;
  width: 116px;
  display: grid;
  grid-auto-rows: 34px;
  padding: 2px 0 3px;
  background: #4f483f;
  border: 1px solid #2f2a25;
  box-shadow: none;
  z-index: 20;
}

.reader-views-menu[hidden] {
  display: none;
}

.reader-view-option {
  width: 100%;
  height: 34px;
  display: grid;
  grid-template-columns: 31px 1fr;
  align-items: center;
  gap: 4px;
  padding: 2px 3px 2px 6px;
  color: #e3e4db;
  background: transparent;
  border: 0;
  text-align: left;
}

.reader-view-option__icon {
  width: 27px;
  height: 22px;
  display: block;
  background: #fff;
  border: 1px solid #2f2a25;
  box-shadow:
    inset 4px 0 0 #6c6b64,
    inset 7px 0 0 #f7f7ef,
    inset 0 4px 0 #d9d8cc,
    inset 0 7px 0 #fff,
    inset 0 10px 0 #d9d8cc,
    inset 0 13px 0 #fff;
}

.reader-view-option strong {
  min-width: 0;
  white-space: pre-line;
  font-size: 10px;
  font-weight: 400;
  line-height: 11px;
}

.reader-view-option.is-active,
.reader-view-option:active {
  background: #5f584d;
}

.reader-text-menu {
  position: absolute;
  left: 386px;
  top: 98px;
  z-index: 65;
  width: 104px;
  padding: 3px 0;
  color: #e3e4db;
  background: #4f483f;
  border: 1px solid #2f2a25;
  box-shadow: none;
  font: 11px/16px "MS Sans Serif", Tahoma, Arial, sans-serif;
}

.reader-text-menu[hidden] {
  display: none;
}

.reader-text-menu button {
  width: 100%;
  min-width: 0;
  height: 20px;
  display: block;
  padding: 1px 8px 2px;
  color: #e3e4db;
  background: transparent;
  border: 0;
  text-align: left;
  white-space: nowrap;
  font: inherit;
  cursor: pointer;
}

.reader-text-menu button:hover,
.reader-text-menu button:focus,
.reader-text-menu[data-keyboard-open="true"] button:first-of-type {
  color: #fff;
  background: #948b74;
  outline: 0;
}

.reader-text-menu__separator {
  height: 0;
  margin: 4px 7px;
  border-top: 1px solid #c7c3b8;
}

.reader-text-menu__text-row span {
  padding-left: 2px;
}

.reader-text-menu__text-row--large span {
  font-size: 16px;
  line-height: 14px;
}

.reader-text-menu__help::before {
  content: "?";
  width: 13px;
  height: 13px;
  display: inline-block;
  margin: 0 6px 0 0;
  color: #fff;
  background: #d4c873;
  border-radius: 50%;
  text-align: center;
  font-size: 10px;
  line-height: 13px;
  font-weight: 700;
  vertical-align: -1px;
}

.reader-view-actions {
  align-self: end;
  display: grid;
  gap: 7px;
  padding: 2px 0;
}

.reader-outline-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 1px;
  padding: 3px 0 6px 12px;
  overflow: hidden;
  font-size: 10px;
}

.reader-outline-list button {
  min-width: 0;
  height: 17px;
  padding: 0 2px;
  color: #000;
  background: transparent;
  border: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-outline-list button::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border: 1px solid #a44a56;
  vertical-align: -1px;
}

.reader-outline-list button.reader-outline-list__media {
  padding-left: 14px;
  color: #9f3546;
}

.reader-outline-list button.reader-outline-list__media::before {
  background: #c06a7a;
  box-shadow: inset 1px 1px 0 #f0c0ca, inset -1px -1px 0 #74313d;
}

.reader-outline-list button.reader-outline-list__media.is-active {
  color: #fff;
  background: #8f213b;
}

.reader-outline-list button:hover,
.reader-outline-list button:focus-visible {
  color: #a44a56;
  outline: 0;
}

.reader-view-actions button {
  width: 136px;
  height: 18px;
  padding: 0 4px;
  color: #000;
  background: #efe8e0;
  border: 1px solid;
  border-color: #fff8ff #807870 #807870 #fff8ff;
  font-size: 10px;
  line-height: 16px;
}

.reader-article {
  display: block;
  min-height: 0;
  padding: 0 0 0 0;
  overflow: hidden;
  position: relative;
}

.reader-article__body {
  min-height: 0;
  overflow: auto;
  height: 100%;
  padding: 0 18px 22px 2px;
  background-color: transparent;
  border-left: 0;
  box-shadow: inset -15px 0 0 #efe8e0;
}

/* Win95-style scrollbar on the reader body — light face with chiseled
   bevel buttons. Webkit-only, but matches Steve frames' chrome on Chrome /
   Edge / Safari (Firefox falls back to platform default, acceptable). */
.reader-article__body::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}
.reader-article__body::-webkit-scrollbar-track {
  background-color: #c0c0c0;
  background-image:
    repeating-linear-gradient(
      45deg,
      #d4d0c8 0,
      #d4d0c8 1px,
      #ffffff 1px,
      #ffffff 2px
    );
}
.reader-article__body::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 1px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
}
.reader-article__body::-webkit-scrollbar-thumb:active {
  border-color: #404040 #ffffff #ffffff #404040;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
}
.reader-article__body::-webkit-scrollbar-button:single-button {
  background: #c0c0c0;
  border: 1px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
  height: 16px;
  width: 16px;
  display: block;
}
.reader-article__body::-webkit-scrollbar-corner {
  background: #c0c0c0;
}

/* Area watermark — bottom-left of the whole reader view, behind both the
   Views pane and the Article body (matching article-aare_view-*). The
   reference frames render on pure white (#fff8ff was an earlier purple
   tint that didn't match Steve's Aare/Michigan/Akhmatova captures). */
#reader-view {
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 420px auto;
}

#reader-view[data-reader-area="history"]         { background-image: url("extracted/ne-resources/wtrmark-png/WTRMARK.DLL_2_W_HIST_1.png"); }
#reader-view[data-reader-area="geography"]       { background-image: url("extracted/ne-resources/wtrmark-png/WTRMARK.DLL_2_W_GEO_1.png"); }
#reader-view[data-reader-area="literature"]      { background-image: url("extracted/ne-resources/wtrmark-png/WTRMARK.DLL_2_W_ART_1.png"); }
#reader-view[data-reader-area="science"],
#reader-view[data-reader-area="physical-science"] { background-image: url("extracted/ne-resources/wtrmark-png/WTRMARK.DLL_2_W_PHYS_1.png"); }
#reader-view[data-reader-area="performing-arts"] { background-image: url("extracted/ne-resources/wtrmark-png/WTRMARK.DLL_2_W_PERF_1.png"); }
#reader-view[data-reader-area="sports"]          { background-image: url("extracted/ne-resources/wtrmark-png/WTRMARK.DLL_2_W_SPORTS_1.png"); }
#reader-view[data-reader-area="religion"]        { background-image: url("extracted/ne-resources/wtrmark-png/WTRMARK.DLL_2_W_REL_1.png"); }
#reader-view[data-reader-area="life-science"]    { background-image: url("extracted/ne-resources/wtrmark-png/WTRMARK.DLL_2_W_LIFE_1.png"); }
#reader-view[data-reader-area="social-science"]  { background-image: url("extracted/ne-resources/wtrmark-png/WTRMARK.DLL_2_W_SS_1.png"); }

.reader-article__body h1 {
  display: none;
}

/* h2 section heads. Uses the Arial system stack (NOT "Encarta Arial")
   so the 700 weight cascades to system Arial Bold — the bundled
   ARIAL.TTF carries only a Regular face. Verified against Cleveland's
   "Rise to Prominence in New York" section break. */
.reader-article__body h2 {
  margin: 14px 0 3px 230px;
  color: #000;
  font: 700 15px/1.22 Arial, "MS Sans Serif", Tahoma, sans-serif;
}

.reader-article__body p {
  /* ~38-char wrap in the Aare/Akhmatova/Michigan reference frames maps
     to ~40ch at the new 15px size. */
  max-width: 40ch;
  margin: 0 0 8px 230px;
  font: 15px/1.27 "Encarta Arial", Arial, "MS Sans Serif", Tahoma, sans-serif;
}

#reader-view[data-reader-text-size="small"] .reader-article__body p {
  font-size: 13px;
  line-height: 1.3;
}

#reader-view[data-reader-text-size="large"] .reader-article__body p {
  font-size: 17px;
  line-height: 1.24;
}

/* Force bold runs inside body paragraphs to use the system Arial stack
   (NOT "Encarta Arial" — pinned to weight 400 above, so it would never
   match 700 and Chrome would synthesize a faux-bold instead of picking
   real Arial Bold). Without this, the article-title lead-in
   ("Aare,", "Akhmatova, Anna,", "Michigan, Lake,") would render at the
   same weight as surrounding prose. */
.reader-article__body p strong,
.reader-article__body p b {
  font-family: Arial, "MS Sans Serif", Tahoma, sans-serif;
  font-weight: 700;
}

/* Italic runs — used by foreign alt-names like Obringa, Vecher, Chetki,
   Anno domini MXMXXI, Iva. The articleBlocks() parser emits a new
   kind: "italic" → <em class="reader-italic"> that this rule italicizes.
   articleCrossRefRelated() filters by kind === "xref" so genuine red
   links (Switzerland, Bern, Lake Huron, …) keep landing in Related
   Articles while alt-names do not. */
.reader-article__body p em,
.reader-article__body p .reader-italic {
  font-family: "Encarta Arial", Arial, "MS Sans Serif", Tahoma, sans-serif;
  font-style: italic;
  color: inherit;
}

.reader-article__body--feature h2,
.reader-article__body--feature p {
  margin-left: 230px;
  max-width: none;
}

.atlas-overlay {
  position: absolute;
  left: 8px;
  top: 38px;
  width: 376px;
  height: 300px;
  max-width: calc(100% - 14px);
  max-height: calc(100% - 18px);
  z-index: 50;
  display: grid;
  grid-template-rows: 16px 1fr 24px;
  background: #000;
  border: 1px solid #1a1815;
  box-shadow: 1px 1px 0 #000;
}

.atlas-overlay[hidden] {
  display: none;
}

.atlas-overlay__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 6px;
  color: #fff;
  background: linear-gradient(180deg, #354a7d 0%, #243767 60%, #1b2a52 100%);
  border-bottom: 1px solid #1a1610;
  font: 10px/1 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 2px;
}

.atlas-overlay__title {
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
}

.atlas-overlay__titlebar button {
  height: 14px;
  padding: 0 6px;
  color: #fff;
  background: transparent;
  border: 0;
  border-left: 1px solid #c8c4d6;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.atlas-overlay__viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #000;
  overflow: hidden;
}

.atlas-overlay__globe {
  position: absolute;
  left: 34px;
  top: -4px;
  width: auto;
  height: calc(100% + 92px);
  image-rendering: pixelated;
  clip-path: inset(0 52% 0 0);
}

.atlas-overlay[data-atlas-zoom="state"] .atlas-overlay__globe {
  left: auto;
  right: 0;
  top: -20%;
  height: 192%;
  clip-path: inset(0 0 0 48%);
}

.atlas-overlay[data-atlas-zoom="state"] .atlas-overlay__labels {
  display: none;
}

/* Steve frames 0472-0475: selecting a place from "Find a Place..." zooms the
   map to the place; user then clicks "Go to Article".  Until |MVINDEX is
   fully decoded into a per-place state map we surface this as a temporary
   floating affordance over the zoomed view. */
.atlas-overlay__place-zoom-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 6px 12px;
  background: #ffffe1;
  border: 1px solid #000;
  box-shadow: 1px 1px 0 #000;
  font-family: "MS Sans Serif", Tahoma, sans-serif;
  font-size: 12px;
  color: #000;
  cursor: pointer;
}

.atlas-overlay__place-zoom-hint:focus {
  outline: 1px dotted #000;
  outline-offset: -3px;
}

.atlas-overlay__place-zoom-hint[hidden] {
  display: none;
}

/* Continent + ocean labels overlay, positioned relative to the viewport.
   Tile-aware: data-atlas-region toggles which labels show. */
.atlas-overlay__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.atlas-overlay__label {
  position: absolute;
  color: #fff;
  font: italic 14px/1 "Times New Roman", Georgia, serif;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
  white-space: pre-line;
  text-align: center;
  transform: translate(-50%, -50%);
}

.atlas-overlay__label--continent {
  font: 700 14px/1.08 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 3px;
  color: #4f805d;
  text-shadow: none;
}

.atlas-overlay__label--ocean {
  color: #fff8e6;
  font-style: italic;
}

/* Tile badge — moved out of view by default; can be re-enabled later. */
.atlas-overlay__tile-badge {
  display: none;
  position: absolute;
  right: 6px;
  bottom: 4px;
  padding: 1px 6px;
  background: rgba(46, 41, 33, 0.78);
  color: #f3eedb;
  font: 9px/1.2 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 1px;
  pointer-events: none;
  border-radius: 1px;
}

/* Right-click context menu (atlas_globe-northern-europe-popup_0453s):
   floating window with dark titlebar (region name + Close), then Zoom In /
   Go to Article / Scale-Legend / Sights and Sounds / Pronunciation.
   Some items greyed. */
.atlas-overlay__context-menu {
  position: absolute;
  min-width: 150px;
  background: #c7c7b5;
  border: 2px solid;
  border-color: #f3f1e5 #4a463f #4a463f #f3f1e5;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  padding: 0;
  z-index: 20;
  font: 11px/1.2 "MS Sans Serif", Tahoma, sans-serif;
}
.atlas-overlay__context-menu__titlebar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 4px 0 6px;
  height: 16px;
  background: #20424a;
  color: #d4c873;
  font-weight: 700;
}
.atlas-overlay__context-menu__titlebar::before {
  content: "▼ ";
  margin-right: 2px;
}
.atlas-overlay__context-menu__titlebar button {
  height: 14px;
  padding: 0 6px;
  background: transparent;
  color: #d4c873;
  border: 0;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}
.atlas-overlay__context-menu button[role="menuitem"] {
  display: block;
  width: 100%;
  padding: 3px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  color: #1a1815;
  cursor: pointer;
}
.atlas-overlay__context-menu button[role="menuitem"]:hover,
.atlas-overlay__context-menu button[role="menuitem"]:focus {
  background: #1a1c5e;
  color: #f3eedb;
  outline: none;
}
.atlas-overlay__context-menu button[role="menuitem"]:disabled,
.atlas-overlay__context-menu button[role="menuitem"][aria-disabled="true"] {
  color: #807870;
  cursor: default;
}
.atlas-overlay__context-menu button[role="menuitem"]:disabled:hover,
.atlas-overlay__context-menu button[role="menuitem"][aria-disabled="true"]:hover {
  background: transparent;
  color: #807870;
}

.atlas-overlay__footer {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 0 18px 5px 18px;
  background: #000;
  border-top: 0;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
}

/* Globe-level toolbar: only "Click map for options" + Find a Place + Rotate
   compass. Zoom Out and Scale/Legend appear only at state-level. */
.atlas-overlay__footer[data-atlas-zoom="globe"] #atlas-zoom-out,
.atlas-overlay__footer[data-atlas-zoom="globe"] #atlas-legend-btn {
  display: none;
}

.atlas-overlay__footer[data-atlas-zoom="state"] {
  grid-template-columns: auto auto 1fr auto;
}
.atlas-overlay__footer[data-atlas-zoom="state"] .atlas-overlay__hint,
.atlas-overlay__footer[data-atlas-zoom="state"] .atlas-overlay__rotate-group {
  display: none;
}

.atlas-overlay__zoom,
.atlas-overlay__legend-btn {
  padding: 3px 14px 2px;
  color: #f2ead0;
  background: #000;
  border: 1px solid #b8a980;
  box-shadow: 1px 1px 0 #4c402c;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}

.atlas-overlay__zoom:active,
.atlas-overlay__legend-btn:active,
.atlas-overlay__legend-btn[aria-expanded="true"] {
  border-color: #4c402c #d5c594 #d5c594 #4c402c;
}

.atlas-overlay__legend-panel {
  position: absolute;
  right: 8px;
  bottom: 36px;
  z-index: 5;
  display: grid;
  grid-template-rows: 16px 1fr;
  background: #ece6d4;
  border: 1px solid #1a1815;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}

.atlas-overlay__legend-panel[hidden] {
  display: none;
}

.atlas-overlay__legend-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 6px;
  color: #fff;
  background: linear-gradient(180deg, #5a6088 0%, #3c4270 60%, #2c3258 100%);
  border-bottom: 1px solid #1a1610;
  font: 10px/1 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 2px;
}

.atlas-overlay__legend-titlebar button {
  height: 14px;
  padding: 0 6px;
  color: #fff;
  background: transparent;
  border: 0;
  border-left: 1px solid #c4cae8;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.atlas-overlay__legend-body {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 4px;
  max-height: 320px;
  overflow: auto;
  background: #ece6d4;
}

.atlas-overlay__legend-img {
  display: block;
  image-rendering: pixelated;
}

.atlas-overlay__find-panel {
  position: absolute;
  left: 56%;
  top: 48px;
  transform: translateX(-50%);
  z-index: 6;
  width: 184px;
  height: 236px;
  max-width: calc(100% - 16px);
  display: grid;
  grid-template-rows: 16px 1fr;
  background: #2f2926;
  border: 1px solid #1a1815;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}

.atlas-overlay__find-panel[hidden] {
  display: none;
}

.atlas-overlay__find-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 6px;
  color: #fff;
  background: linear-gradient(180deg, #5a6088 0%, #3c4270 60%, #2c3258 100%);
  border-bottom: 1px solid #1a1610;
  font: 10px/1 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 0;
}

.atlas-overlay__find-titlebar button {
  height: 14px;
  padding: 0 6px;
  color: #fff;
  background: transparent;
  border: 0;
  border-left: 1px solid #c4cae8;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.atlas-overlay__find-body {
  display: grid;
  grid-template-rows: 20px 1fr;
  gap: 0;
  padding: 8px 18px 18px;
  background: #2f2926;
}

.atlas-overlay__find-label {
  display: none;
}

.atlas-overlay__find-input {
  width: 100%;
  height: 20px;
  padding: 2px 4px;
  border: 1px solid #1a1815;
  font: 12px/1.2 "MS Sans Serif", Tahoma, sans-serif;
  background: #fff;
  color: #000;
  box-sizing: border-box;
}

.atlas-overlay__find-results {
  list-style: none;
  margin: 0;
  padding: 2px 0;
  min-height: 0;
  overflow-y: scroll;
  background: #fff;
  border: 1px solid #1a1815;
  border-top: 0;
  font: 12px/1.34 "MS Sans Serif", Tahoma, sans-serif;
  scrollbar-color: #9a9276 #f1f1e7;
}

.atlas-overlay__find-results:empty {
  display: block;
}

.atlas-overlay__find-result {
  padding: 1px 6px;
  cursor: pointer;
  min-height: 16px;
  white-space: nowrap;
}

.atlas-overlay__find-result.is-active {
  background: #cbc7b4;
  color: #000;
}

.atlas-overlay__find-result:hover:not(.is-active) {
  color: #a75d70;
}

.atlas-overlay__find-result--unresolved {
  color: #a75d70;
  cursor: default;
}

.atlas-overlay__find-result--unresolved.is-active {
  background: transparent;
  color: #a75d70;
}

.atlas-overlay__find-result__hint {
  display: none;
}

.atlas-overlay__find-status {
  display: none;
}

.atlas-overlay__hint {
  justify-self: start;
  align-self: start;
  color: #f2ead0;
  font-size: 9px;
  white-space: normal;
  line-height: 1.1;
  min-width: 0;
}

.atlas-overlay__find {
  padding: 3px 14px 2px;
  color: #f2ead0;
  background: #000;
  border: 1px solid #b8a980;
  box-shadow: 1px 1px 0 #4c402c;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}

.atlas-overlay__rotate-group {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #f2ead0;
}

/* Matches atlas_globe-europe-africa-asia_0461s: light cream diamond
   with 4 dark triangle arrows pointing N/E/S/W. SVG draws the diamond +
   arrows; transparent <span> hitboxes overlay each arrow for click
   handling (the existing JS attaches to `.atlas-overlay__compass span`
   by class name). */
.atlas-overlay__compass {
  position: relative;
  width: 22px;
  height: 22px;
  display: block;
}

.atlas-overlay__compass-svg {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
}

.atlas-overlay__compass span {
  position: absolute;
  width: 8px;
  height: 8px;
  display: block;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  z-index: 1;
}

.atlas-overlay__compass-n { top: 2px; left: 7px; }
.atlas-overlay__compass-e { top: 7px; right: 2px; }
.atlas-overlay__compass-s { bottom: 2px; left: 7px; }
.atlas-overlay__compass-w { top: 7px; left: 2px; }

.atlas-overlay__compass span:hover {
  background: rgba(255, 255, 255, 0.25);
}

.atlas-overlay__rotate-label {
  font-size: 10px;
}

/* Features menu — vertical stack of 63×61 icon sprites (Atlas / Media Gallery
   / TimeLine / MindMaze). Each *_ICON.png is 126×61 with two states side-by-
   side; left half = normal, right half = pressed/hover. Label text is baked
   into the sprite, so no separate text node is needed. */
.reader-features-menu {
  position: absolute;
  top: 100%;
  right: 66px;        /* anchored under the ▼ Features pane */
  z-index: 40;
  width: 63px;
  display: none;
  flex-direction: column;
  background: #88aa8c;
  border: 2px solid;
  border-color: #f3f1e5 #4a463f #4a463f #f3f1e5;
}

.reader-features-menu[aria-expanded="true"],
body.reader-features-menu-open .reader-features-menu {
  display: flex;
}

.reader-commandbar .reader-features-menu button.reader-features-menu__tile {
  width: 63px;
  height: 61px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 126px 61px;
  cursor: pointer;
}

.reader-commandbar .reader-features-menu button.reader-features-menu__tile:hover,
.reader-commandbar .reader-features-menu button.reader-features-menu__tile:focus-visible {
  background-position: -63px 0;
  outline: 0;
}

/* Higher-specificity to beat .reader-commandbar button { background: ... }. */
.reader-commandbar .reader-features-menu button.reader-features-menu__tile--atlas    { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ATLAS_ICON.png"); }
.reader-commandbar .reader-features-menu button.reader-features-menu__tile--media    { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_MEDIA_ICON.png"); }
.reader-commandbar .reader-features-menu button.reader-features-menu__tile--timeline { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_TIMEL_ICON.png"); }
.reader-commandbar .reader-features-menu button.reader-features-menu__tile--mindmaze { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_MINDM_ICON.png"); }

/* Tools menu — vertical stack of 54×51 icon sprites (Browse Panel /
   Dictionary-Thesaurus / Notemark / Back List / Word Processor). Each
   *_ICON.png is 108×51 with two states; left = normal, right = hover. Per
   Steve frame article-rhine_tools-menu-open_0338s_5.jpg the menu anchors
   below the ▼ Tools pane (rightmost text pane on the commandbar). */
.reader-tools-menu {
  position: absolute;
  top: 100%;
  right: 18px;        /* anchored under the ▼ Tools pane (info button is 18px wide right of it) */
  z-index: 40;
  width: 54px;
  display: none;
  flex-direction: column;
  background: #88aa8c;
  border: 2px solid;
  border-color: #f3f1e5 #4a463f #4a463f #f3f1e5;
}

body.reader-tools-menu-open .reader-tools-menu {
  display: flex;
}

.reader-commandbar .reader-tools-menu button.reader-tools-menu__tile {
  width: 54px;
  height: 51px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 108px 51px;
  cursor: pointer;
}

.reader-commandbar .reader-tools-menu button.reader-tools-menu__tile:hover,
.reader-commandbar .reader-tools-menu button.reader-tools-menu__tile:focus-visible {
  background-position: -54px 0;
  outline: 0;
}

.reader-commandbar .reader-tools-menu button.reader-tools-menu__tile--browse   { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_BROWSE_ICON.png"); }
.reader-commandbar .reader-tools-menu button.reader-tools-menu__tile--dict     { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_DICT_ICON.png"); }
.reader-commandbar .reader-tools-menu button.reader-tools-menu__tile--note     { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_NOTEM_ICON.png"); }
.reader-commandbar .reader-tools-menu button.reader-tools-menu__tile--backlist { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_BACKL_ICON.png"); }
.reader-commandbar .reader-tools-menu button.reader-tools-menu__tile--word     { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_WORDP_ICON.png"); }

/* Back List popup — floating window with article-history list. Per Steve
   frame article-akhmatova_back-list-popup_0413s_4.jpg. */
.reader-back-list {
  position: absolute;
  top: 24px;
  left: 106px;
  z-index: 50;
  width: 218px;
  height: 226px;
  display: grid;
  grid-template-rows: 18px 1fr;
  background: #3e3831;
  border: 1px solid #302929;
  box-shadow: none;
  font: 11px/1.2 "MS Sans Serif", Tahoma, sans-serif;
}
.reader-back-list[hidden] { display: none; }

.reader-back-list__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 18px;
  padding: 0 3px 0 6px;
  background: #3e3831;
  color: #e3e4db;
  font-weight: 400;
  font-size: 11px;
  cursor: move;
}

.reader-commandbar .reader-back-list button.reader-back-list__close {
  width: auto;
  height: 16px;
  padding: 0 4px;
  background: transparent;
  color: #e3e4db;
  border: 0;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
}

.reader-back-list__body {
  min-height: 0;
  overflow-y: auto;
  margin: 8px;
  padding: 2px 0;
  background: #fff;
}

.reader-back-list__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: #000;
  font: inherit;
  cursor: pointer;
}
.reader-back-list__item:hover,
.reader-back-list__item:focus-visible {
  background: #d8d4c4;
  color: #000;
  outline: 0;
}

/* Related Articles popover — matches article-aare_related-articles-popup_0311s.
   Floats over the Views/Article area when the "Related Articles" button is
   clicked. Blue titlebar, yellow article-name strip, white list of related
   article titles. */
.reader-related-popup {
  position: fixed;
  left: 10px;
  top: 143px;
  z-index: 55;
  width: 184px;
  height: 280px;
  background: #2f2a25;
  border: 1px solid #2f2a25;
  font: 11px/1.2 "MS Sans Serif", Tahoma, sans-serif;
  display: grid;
  grid-template-rows: 18px 24px 1fr;
}

.reader-related-popup__titlebar > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-related-popup[hidden] { display: none; }

.reader-related-popup__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 0 5px;
  background: #676ba4;
  color: #fff;
  font-weight: 400;
}

.reader-commandbar .reader-related-popup button.reader-related-popup__close,
.reader-related-popup__close {
  width: auto;
  height: 16px;
  padding: 0 3px;
  background: transparent;
  color: #fff;
  border: 0;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
}

.reader-related-popup__article-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  margin: 5px 8px 0;
  overflow: hidden;
  background: #948b74;
  color: #fff;
  font-weight: 400;
  white-space: nowrap;
}

.reader-related-popup__body {
  min-height: 130px;
  max-height: none;
  overflow-y: auto;
  margin: 3px 8px 8px;
  padding: 2px 0;
  background: #fff;
}

.reader-commandbar .reader-related-popup button.reader-related-popup__item,
.reader-related-popup__item {
  display: block;
  width: 100%;
  height: auto;
  text-align: left;
  padding: 2px 4px !important;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
  color: #000 !important;
  font: inherit;
  cursor: pointer;
}

.reader-commandbar .reader-related-popup button.reader-related-popup__item:hover,
.reader-commandbar .reader-related-popup button.reader-related-popup__item.is-current,
.reader-related-popup__item:hover,
.reader-related-popup__item.is-current,
.reader-related-popup__item:focus-visible {
  background: #d8d4c4 !important;
  color: #000 !important;
  outline: 0;
}

/* §2 Area-of-Interest mega-menu — matches Encarta's cascading mega-menu:
   header band + always-visible area column on the left + a category column
   that floats anchored to the selected area's row Y position (so categories
   drop down from the hovered area, classic cascading-menu behavior). */
.reader-area-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 45;
  width: 398px;        /* 168 area col + 230 categories col, flush */
  display: flex;
  flex-direction: column;
  background: transparent;
  font: 11px/1.2 "MS Sans Serif", Tahoma, sans-serif;
}
.reader-area-menu[hidden] { display: none; }

.reader-area-menu__header {
  width: 168px;             /* matches the CAT_*.png sprite half-width */
  height: 19px;
  display: flex;
  align-items: center;
  background: #20424a;
  color: #d4c873;
  font-weight: 700;
  font-size: 11px;
  padding: 0 8px;
}

.reader-area-menu__body {
  position: relative;
  width: 398px;
  height: 369px;             /* 9 area rows × 41px */
}

.reader-area-menu__col {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
}

.reader-area-menu__col--areas {
  left: 0;
  width: 168px;
  background-color: #4a1d1d;   /* burgundy fallback behind the sprite */
}

.reader-area-menu__col--categories {
  left: 168px;
  width: 230px;
  background-color: #e3d090;
  /* Cascade from the active area's row: top is set inline by JS via
     style.top = <areaIndex * rowHeight>px. */
}

/* Each area row uses one of the 9 CAT_*.png sprites (336×41 two-state
   sheets — left half = inactive, right half = active with watermark
   illustration baked in). The label + arrow live in the bitmap; the
   button itself is just a clickable rectangle with a sprite background.
   Specificity bump on the parent selector overrides commandbar button
   defaults. */
.reader-area-menu button.reader-area-menu__area {
  display: block;
  width: 168px;
  height: 41px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;   /* left half — inactive */
  background-size: 336px 41px;
  cursor: pointer;
  /* The sprite already has the label; no inline text. */
}

.reader-area-menu button.reader-area-menu__area.is-active {
  background-position: -168px 0;
}

/* Visually hidden but screen-reader-readable label so the menu remains
   accessible despite the bitmap-baked text. */
.reader-area-menu__area-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Higher-specificity selectors needed: `.reader-commandbar button` (0,1,1)
   uses `background:` shorthand which resets background-image to none and
   would otherwise override a lower-specificity per-area rule. */
.reader-area-menu button.reader-area-menu__area--physical-science { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_CAT_PHYS.png"); }
.reader-area-menu button.reader-area-menu__area--life-science     { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_CAT_LIFE.png"); }
.reader-area-menu button.reader-area-menu__area--geography        { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_CAT_GEOG.png"); }
.reader-area-menu button.reader-area-menu__area--history          { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_CAT_HISTORY.png"); }
.reader-area-menu button.reader-area-menu__area--social-science   { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_CAT_SOCIAL.png"); }
.reader-area-menu button.reader-area-menu__area--religion         { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_CAT_RELIGION.png"); }
.reader-area-menu button.reader-area-menu__area--literature       { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_CAT_ARTLANG.png"); }
.reader-area-menu button.reader-area-menu__area--performing-arts  { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_CAT_PERFORM.png"); }
.reader-area-menu button.reader-area-menu__area--sports           { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_CAT_SPORTS.png"); }

/* Hover and focus also flip to the sprite's right (active) half. The
   is-active state is handled by the dedicated rule above; this one covers
   keyboard focus / mouse hover before the area is committed as active. */
.reader-area-menu button.reader-area-menu__area:hover,
.reader-area-menu button.reader-area-menu__area:focus-visible {
  background-position: -168px 0;
  outline: 0;
}

.reader-area-menu button.reader-area-menu__category {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 10px;
  border: 0;
  border-bottom: 1px solid #2a1010;
  background: transparent;
  color: #2a1010;
  font-family: "Encarta Arial", Arial, sans-serif;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.2;
  white-space: normal;
  height: auto;
}
.reader-area-menu button.reader-area-menu__category:last-child {
  border-bottom: 0;
}

/* Default hover on a category row uses outline:0 only; the actual hover
   color is set per-area below since each area has its own theme. */
.reader-area-menu button.reader-area-menu__category:hover,
.reader-area-menu button.reader-area-menu__category:focus-visible,
.reader-area-menu button.reader-area-menu__category.is-active {
  outline: 0;
}

/* Per-area accent tinting — column background + category hover. Each pair
   uses the area's theme (base column bg) and a darker shade for hover,
   transcribed from the hover frames in
   ~/Desktop/screen_recording_frames/ArticleView/article-cleveland_aoi-*-hover-*.jpg.
   Uses `background-color` (not the `background` shorthand) so it doesn't
   reset any other background properties on the same element. */
.reader-area-menu[data-active-area="physical-science"] .reader-area-menu__col--categories { background-color: #c5cce0; }
.reader-area-menu[data-active-area="physical-science"] button.reader-area-menu__category:hover,
.reader-area-menu[data-active-area="physical-science"] button.reader-area-menu__category.is-active { background-color: #8a99b9; }

.reader-area-menu[data-active-area="life-science"]     .reader-area-menu__col--categories { background-color: #b6cf9d; }
.reader-area-menu[data-active-area="life-science"]     button.reader-area-menu__category:hover,
.reader-area-menu[data-active-area="life-science"]     button.reader-area-menu__category.is-active { background-color: #87b06b; }

.reader-area-menu[data-active-area="geography"]        .reader-area-menu__col--categories { background-color: #9fb893; }
.reader-area-menu[data-active-area="geography"]        button.reader-area-menu__category:hover,
.reader-area-menu[data-active-area="geography"]        button.reader-area-menu__category.is-active { background-color: #6f9162; }

.reader-area-menu[data-active-area="history"]          .reader-area-menu__col--categories { background-color: #cdb88e; }
.reader-area-menu[data-active-area="history"]          button.reader-area-menu__category:hover,
.reader-area-menu[data-active-area="history"]          button.reader-area-menu__category.is-active { background-color: #a08458; }

.reader-area-menu[data-active-area="social-science"]   .reader-area-menu__col--categories { background-color: #e6da7d; }
.reader-area-menu[data-active-area="social-science"]   button.reader-area-menu__category:hover,
.reader-area-menu[data-active-area="social-science"]   button.reader-area-menu__category.is-active { background-color: #c0b550; }

.reader-area-menu[data-active-area="religion"]         .reader-area-menu__col--categories { background-color: #d4ad42; }
.reader-area-menu[data-active-area="religion"]         button.reader-area-menu__category:hover,
.reader-area-menu[data-active-area="religion"]         button.reader-area-menu__category.is-active { background-color: #b08820; }

.reader-area-menu[data-active-area="literature"]       .reader-area-menu__col--categories { background-color: #afb8c4; }
.reader-area-menu[data-active-area="literature"]       button.reader-area-menu__category:hover,
.reader-area-menu[data-active-area="literature"]       button.reader-area-menu__category.is-active { background-color: #6c83a8; color: #f4ecd6; }

.reader-area-menu[data-active-area="performing-arts"]  .reader-area-menu__col--categories { background-color: #b04848; }
.reader-area-menu[data-active-area="performing-arts"]  button.reader-area-menu__category   { color: #f4ecd6; }
.reader-area-menu[data-active-area="performing-arts"]  button.reader-area-menu__category:hover,
.reader-area-menu[data-active-area="performing-arts"]  button.reader-area-menu__category.is-active { background-color: #842828; }

.reader-area-menu[data-active-area="sports"]           .reader-area-menu__col--categories { background-color: #f0c038; }
.reader-area-menu[data-active-area="sports"]           button.reader-area-menu__category:hover,
.reader-area-menu[data-active-area="sports"]           button.reader-area-menu__category.is-active { background-color: #c89018; }

.reader-area-menu__loading {
  padding: 8px;
  color: #f4ecd6;
}

.timeline-overlay {
  /* Spans the topic-title row + content row across both grid columns, so it
     covers the article body AND the Views index — matching Steve's frame
     where the Timeline panel fills the inner Encarta window. */
  grid-column: 1 / -1;
  grid-row: 3 / -1;
  align-self: stretch;
  justify-self: stretch;
  z-index: 50;
  display: grid;
  grid-template-rows: 16px 1fr 26px;
  margin: 4px 6px 6px 6px;
  background: #f6e9c8;
  border: 1px solid #1a1815;
  box-shadow: 1px 1px 0 #000;
}

.timeline-overlay[hidden] {
  display: none;
}

.timeline-overlay__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 6px;
  color: #fff;
  background: linear-gradient(180deg, #5a6088 0%, #3c4270 60%, #2c3258 100%);
  border-bottom: 1px solid #1a1610;
  font: 10px/1 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 2px;
}

.timeline-overlay__title {
  text-transform: uppercase;
}

.timeline-overlay__titlebar button {
  height: 14px;
  padding: 0 6px;
  color: #fff;
  background: transparent;
  border: 0;
  border-left: 1px solid #c4cae8;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.timeline-overlay__viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 21px,
      rgba(120, 100, 60, 0.10) 21px 22px),
    #fff7e6;
  overflow: hidden;
}

/* The static TIMEFIL.png composite includes a year-tick strip at the bottom
   that doesn't belong in the active timeline viewport (reference shows the
   era illustration only — no tick strip). Hide it. */
.timeline-overlay__watermark {
  display: none;
}

.timeline-overlay__era-illustration {
  display: none;
}

/* Wide era band: 5 adjacent timeline tiles stitched side-by-side, centered
   on the current year. The tiles bring the era illustrations + event icons
   + year labels (e.g. "500,000 BC", "AD 800") baked into the original m12
   bitmap data. */
.timeline-overlay__era-band {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.timeline-overlay__era-band img {
  /* Render at native pixel height so modern tiles (161×200) don't get 2×
     scaled up to match the taller prehistoric tiles (161×400). The band
     hugs the top edge; shorter modern tiles leave empty white below them
     — matches Encarta's original behavior. */
  height: auto;
  width: auto;
  max-height: 100%;
  flex: 0 0 auto;
  image-rendering: pixelated;
  display: block;
}

/* The centered tile is the "active" position; subtle highlight could go here. */
.timeline-overlay__era-band img.is-current {
  opacity: 1;
}

.timeline-overlay__era-menu {
  position: absolute;
  z-index: 60;
  min-width: 120px;
  padding: 2px;
  background: #c7c1ab;
  border: 2px solid;
  border-color: #f0ecdb #4a463f #4a463f #f0ecdb;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  color: #1a1610;
}

.timeline-overlay__era-menu[hidden] {
  display: none;
}

.timeline-overlay__era-menu button {
  display: block;
  width: 100%;
  padding: 3px 8px 3px 18px;
  text-align: left;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.timeline-overlay__era-menu button:hover,
.timeline-overlay__era-menu button:focus-visible {
  background: #2a2f73;
  color: #fff;
  outline: 0;
}

.timeline-overlay__range-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  pointer-events: none;
  display: none;
}

.timeline-overlay__range-band.is-active {
  display: block;
}

/* Plain-text year readout in the footer, replacing the old input+spinner UI. */
.timeline-overlay__year-readout {
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  color: #1a1610;
  padding: 0 4px;
}

.timeline-overlay__range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(184, 71, 42, 0.42);
  border-top: 1px solid rgba(184, 71, 42, 0.85);
  border-bottom: 1px solid rgba(184, 71, 42, 0.85);
}

.timeline-overlay__range-handle {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 14px;
  background: #b8472a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.timeline-overlay__year {
  /* Year labels are baked into the era-band tiles. Hide the overlay text. */
  display: none;
  position: absolute;
  left: 32%;
  top: 38%;
  color: #a8b86c;
  font: 400 56px/1 Georgia, "Times New Roman", serif;
  pointer-events: none;
}

.timeline-overlay__year small {
  font-size: 28px;
  font-weight: 400;
  margin-left: 2px;
  color: #8a9a52;
}

.timeline-overlay__year-side {
  display: none;
  position: absolute;
  right: 4%;
  top: 12%;
  color: #a8b86c;
  font: 400 40px/1 Georgia, "Times New Roman", serif;
  opacity: 0.85;
  pointer-events: none;
}

.timeline-overlay__events {
  /* The era-band tiles already include baked-in event labels + icons from
     the original m12 timeline bitmaps. Hide the dynamic text overlay until
     slice 3 wires real event icons on top of the band. */
  display: none;
  position: absolute;
  inset: 0;
}

.timeline-overlay__event {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #5a3018;
  font: italic 9px/1.2 Georgia, "Times New Roman", serif;
  max-width: 32%;
  cursor: default;
}

.timeline-overlay__event--with-thumb {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* Dynamic-content tiles from year-articles.json — clickable buttons that
   navigate to the underlying article. */
.timeline-overlay__event--dynamic {
  background: none;
  border: none;
  padding: 1px 3px;
  text-align: left;
  font: italic 9px/1.2 Georgia, "Times New Roman", serif;
  color: #5a3018;
  max-width: 40%;
  cursor: pointer;
}
.timeline-overlay__event--dynamic:hover {
  color: #1a1815;
  background: rgba(255, 240, 200, 0.6);
}

.timeline-overlay__event--empty {
  font-style: italic;
  color: #8a6040;
}

.timeline-overlay__event-count {
  position: absolute;
  bottom: 4px;
  right: 8px;
  font: 9px/1 Georgia, "Times New Roman", serif;
  color: #5a3018;
  opacity: 0.7;
  pointer-events: none;
}

.timeline-overlay__thumb {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #888 0%, #555 100%);
  border: 1px solid #2a2418;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.timeline-overlay__thumb::before {
  content: "";
  position: absolute;
  inset: 2px;
  background:
    linear-gradient(135deg, #b8a070 0 40%, #6a5430 60% 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.1) 0 1px, transparent 1px 3px);
}

.timeline-overlay__footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  background: #d8d2c4;
  border-top: 1px solid #1a1815;
}

.timeline-overlay__range-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.timeline-overlay__range-controls[hidden] {
  display: none;
}

.timeline-overlay__range-sep {
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  color: #1a1610;
  padding: 0 2px;
}

.timeline-overlay__input {
  width: 64px;
  padding: 1px 4px;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  background: #fff;
  border: 2px solid;
  border-color: #4a463f #f3f1e5 #f3f1e5 #4a463f;
}

.timeline-overlay__spinner {
  display: inline-flex;
  flex-direction: column;
  margin-left: 1px;
  align-self: stretch;
  padding: 2px 0;
}

.timeline-overlay__spinner-btn {
  flex: 1;
  width: 14px;
  padding: 0;
  background: #c0c0c0;
  border: 1px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  font-size: 6px;
  line-height: 1;
  cursor: pointer;
  color: #1a1610;
}

.timeline-overlay__spinner-btn:active {
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.timeline-overlay__find {
  padding: 1px 12px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  box-shadow: 1px 1px 0 #000;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}

.media-gallery-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: 16px 1fr 26px;
  background: #1c1c1c;
  color: #d8d4cc;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
}

.media-gallery-overlay[hidden] {
  display: none;
}

.media-gallery-overlay__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  background: #1c1c1c;
  color: #e8e4dc;
  font: 10px/1 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 2px;
}

.media-gallery-overlay__title {
  font-weight: bold;
}

.media-gallery-overlay__titlebar button {
  height: 14px;
  padding: 0 6px;
  color: #e8e4dc;
  background: transparent;
  border: 0;
  letter-spacing: 0;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}

.media-gallery-overlay__body {
  display: grid;
  grid-template-columns: 138px 57px 1fr;
  min-width: 0;
  min-height: 0;
  padding: 4px 4px 0 4px;
  gap: 0;
  background: #1c1c1c;
  overflow: hidden;
}

/* When a filter panel is active, it occupies the right column and the
   viewer hides. State driven by state.mediaFilter. */
.media-gallery-overlay__filter-panel {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  display: grid;
  grid-template-rows: 24px 1fr;
  background: #d8d2c4;
  border: 1px solid #4a463f;
  margin: 2px 4px 4px 2px;
  overflow: hidden;
  font: 11px/1.2 "MS Sans Serif", Tahoma, sans-serif;
  color: #1a1610;
}

.media-gallery-overlay__viewer {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.media-gallery-overlay__filter-panel[hidden] {
  display: none;
}

.media-gallery-overlay__filter-bar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  background: #d8d2c4;
  border-bottom: 1px solid #807870;
}

.media-gallery-overlay__filter-title {
  padding-left: 6px;
  font-weight: 700;
}

.media-gallery-overlay__filter-collapse {
  height: 18px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  color: #4a463f;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}

.media-gallery-overlay__filter-reset {
  height: 18px;
  padding: 0 8px;
  background: #c0c0c0;
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}

.media-gallery-overlay__filter-body {
  padding: 12px 16px;
  overflow: auto;
  background: #d8d2c4;
}

/* Media filter grid */
.media-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 14px;
  padding: 16px 18px;
}

.media-filter-tile {
  display: grid;
  grid-template-rows: 73px auto;
  align-items: center;
  justify-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  font: 11px/1.2 "MS Sans Serif", Tahoma, sans-serif;
  color: #1a1610;
}

.media-filter-tile.is-active {
  background: rgba(40, 60, 130, 0.18);
  outline: 1px solid #2c4980;
}

.media-filter-tile__icon {
  width: 69px;
  height: 73px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 207px 73px;
  image-rendering: pixelated;
}

.media-filter-tile.has-media .media-filter-tile__icon {
  background-position: 50% 0;
}

.media-filter-tile:hover .media-filter-tile__icon,
.media-filter-tile:focus-visible .media-filter-tile__icon,
.media-filter-tile.is-active .media-filter-tile__icon {
  background-position: 100% 0;
}

.media-filter-tile--pic .media-filter-tile__icon  { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_PIC.png"); }
.media-filter-tile--map .media-filter-tile__icon  { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_MAP.png"); }
.media-filter-tile--ani .media-filter-tile__icon  { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_ANI.png"); }
.media-filter-tile--snd .media-filter-tile__icon  { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_AUD.png"); }
.media-filter-tile--int .media-filter-tile__icon  { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_INT.png"); }
.media-filter-tile--vid .media-filter-tile__icon  { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_VID.png"); }
.media-filter-tile--cha .media-filter-tile__icon  { background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_CHA.png"); }

/* Category filter — two-column area | category list */
.media-category-filter {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  height: 100%;
  background: #d8d2c4;
}
.media-category-filter__header {
  padding: 4px 8px;
  font-weight: 700;
  background: #d8d2c4;
  border-bottom: 1px solid #807870;
}
.media-category-filter__col {
  overflow: auto;
  padding: 4px 0;
}
.media-category-filter__col--cat {
  background: #4a743f;
  color: #d8eaa0;
}
.media-category-filter__area,
.media-category-filter__cat {
  display: block;
  width: 100%;
  text-align: left;
  padding: 3px 12px;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.media-category-filter__cat {
  color: #d8eaa0;
}
.media-category-filter__area:hover,
.media-category-filter__area.is-active {
  background: #c0baa8;
}
.media-category-filter__cat:hover,
.media-category-filter__cat.is-active {
  background: #2a5028;
  color: #fff;
}

/* Word filter — text input + And/Or/Not/Near operator buttons + hint list */
.media-word-filter {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
  padding: 8px 12px;
}
.media-word-filter__input {
  grid-column: 1 / 2;
  height: 22px;
  padding: 2px 6px;
  background: #fff;
  border: 2px solid;
  border-color: #4a463f #f3f1e5 #f3f1e5 #4a463f;
  font: 12px/1 "MS Sans Serif", Tahoma, sans-serif;
}
.media-word-filter__ops {
  grid-column: 1 / 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.media-word-filter__op {
  padding: 2px 0;
  background: #c0c0c0;
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}
.media-word-filter__op:disabled {
  color: #807870;
  cursor: default;
}
.media-word-filter__hint {
  grid-column: 2 / 3;
  grid-row: 1 / 4;
  margin: 0;
  padding-left: 18px;
  font: 11px/1.4 "MS Sans Serif", Tahoma, sans-serif;
  color: #2c4980;
}

/* Time filter — date range + TIMEFIL strip */
.media-time-filter {
  display: grid;
  gap: 12px;
  padding: 8px 12px;
}
.media-time-filter__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.media-time-filter__input {
  width: 130px;
  height: 22px;
  padding: 2px 6px;
  background: #fff;
  border: 2px solid;
  border-color: #4a463f #f3f1e5 #f3f1e5 #4a463f;
  font: 12px/1 "MS Sans Serif", Tahoma, sans-serif;
}
.media-time-filter__strip {
  width: 100%;
  max-width: 360px;
  height: auto;
  image-rendering: pixelated;
}

/* Place filter — Regions/Countries/Subdivisions/Cities + search + list */
.media-place-filter {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  padding: 8px 12px;
  height: 100%;
}
.media-place-filter__buttons {
  display: grid;
  grid-auto-rows: 22px;
  align-content: start;
  gap: 8px;
}
.media-place-filter__btn {
  padding: 0 8px;
  background: #c0c0c0;
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}
.media-place-filter__btn:disabled {
  color: #807870;
  cursor: default;
}
.media-place-filter__right {
  display: grid;
  grid-template-rows: 22px 1fr;
  gap: 4px;
}
.media-place-filter__input {
  height: 22px;
  padding: 2px 6px;
  background: #fff;
  border: 2px solid;
  border-color: #4a463f #f3f1e5 #f3f1e5 #4a463f;
  font: 12px/1 "MS Sans Serif", Tahoma, sans-serif;
}
.media-place-filter__list {
  overflow: auto;
  background: #fff;
  border: 2px solid;
  border-color: #4a463f #f3f1e5 #f3f1e5 #4a463f;
}
.media-place-filter__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1px 6px;
  border: 0;
  background: transparent;
  font: 11px/1.3 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}
.media-place-filter__item:hover {
  background: #0d3a78;
  color: #fff;
}

.media-gallery-overlay__pinpointer {
  display: grid;
  grid-template-rows: 18px 16px 16px 1fr 14px;
  background: #20407a;
  border: 1px solid #4a6e9e;
  color: #e8e4dc;
  font: 10px/1 "MS Sans Serif", Tahoma, sans-serif;
  overflow: hidden;
}

.media-pinpointer__titlebar {
  padding: 3px 4px 0;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
}

.media-pinpointer__bucket {
  text-align: center;
  background: #b8b0a0;
  color: #1a1610;
  padding: 2px 0;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
}

.media-pinpointer__search {
  width: calc(100% - 6px);
  height: 14px;
  margin: 1px 3px 0;
  padding: 0 3px;
  background: #fff;
  color: #000;
  border: 1px solid #4a4a4a;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
}

.media-pinpointer__list {
  background: #fff;
  margin: 0 3px;
  overflow-y: auto;
  border: 1px solid #4a4a4a;
  color: #1a1610;
  font: 11px/1.18 "MS Sans Serif", Tahoma, sans-serif;
}

.media-pinpointer__item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 2px;
  align-items: center;
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-pinpointer__item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-pinpointer__item.is-active {
  background: #c8c4b0;
}

.media-pinpointer__item::before {
  content: "?";
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  background: #707070;
  color: #fff;
  border-radius: 50%;
  font: bold 8px/1 "MS Sans Serif", Tahoma, sans-serif;
}

.media-pinpointer__progress {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px;
  margin: 0 3px 2px;
  padding-right: 4px;
}

.media-pinpointer__bar {
  height: 6px;
  background: linear-gradient(to right, #4caf50 0%, #4caf50 6%, #1a1a1a 6% 100%);
  border: 1px solid #1a1a1a;
}

.media-gallery-overlay__sidebar {
  display: grid;
  grid-template-rows: 17px repeat(5, 49px) 17px;
  align-content: start;
  justify-items: center;
  gap: 0;
  padding: 0 1px;
  background: #1c1c1c;
}

.media-sidebar-btn {
  width: 55px;
  height: 49px;
  padding: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  border: 0;
  box-shadow: none;
  font-size: 0;
  cursor: pointer;
  image-rendering: pixelated;
}

.media-sidebar-btn:hover,
.media-sidebar-btn:focus-visible {
  background-position: -55px 0;
}

.media-sidebar-btn:active,
.media-sidebar-btn.is-active {
  background-position: -110px 0;
}

.media-sidebar-btn--reset,
.media-sidebar-btn--wizard {
  width: 45px;
  height: 17px;
}

.media-sidebar-btn--reset:hover,
.media-sidebar-btn--reset:focus-visible,
.media-sidebar-btn--wizard:hover,
.media-sidebar-btn--wizard:focus-visible {
  background-position: -45px 0;
}

.media-sidebar-btn--reset:active,
.media-sidebar-btn--wizard:active {
  background-position: -90px 0;
}

/* Reset and Wizard are momentary buttons; do not lock them into a pressed
   sprite state via .is-active (the toggle handler clears state.filter rather
   than entering a "reset" filter mode). */
.media-sidebar-btn--reset.is-active,
.media-sidebar-btn--wizard.is-active {
  background-position: 0 0;
}

.media-sidebar-btn--reset {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_RESET.png");
}

.media-sidebar-btn--word {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_WORDS.png");
}

.media-sidebar-btn--category {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_CATEG.png");
}

.media-sidebar-btn--media {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_MEDIA.png");
}

.media-sidebar-btn--time {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_TIME.png");
}

.media-sidebar-btn--place {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_PLACE.png");
}

.media-sidebar-btn--wizard {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_WIZARD.png");
}

.media-gallery-overlay__viewer {
  display: grid;
  grid-template-rows: 16px 1fr 16px;
  background: #fff;
  border: 1px solid #6a6a6a;
  color: #1a1610;
}

.media-gallery-overlay__viewer[hidden] {
  display: none !important;
}

.media-gallery-overlay__viewer-bar {
  display: flex;
  align-items: center;
  padding: 0 5px;
  background: #20407a;
  color: #fff;
  font: 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.media-gallery-overlay__viewer-canvas {
  display: grid;
  place-items: center;
  background: #fff;
  min-height: 0;
  overflow: hidden;
}

.media-gallery-overlay__placeholder svg {
  max-width: 90%;
  max-height: 90%;
  height: auto;
}
.media-gallery-overlay__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

/* Real media playback elements (§6 wiring) */
.media-gallery-overlay__mci-media-wrap {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.media-gallery-overlay__player--video {
  max-width: 100%;
  max-height: calc(100% - 22px);
  background: #000;
}
.media-gallery-overlay__audio-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
}
.media-gallery-overlay__audio-icon {
  font-size: 64px;
  color: #6a5430;
  line-height: 1;
}
.media-gallery-overlay__player--audio {
  width: 240px;
  max-width: 100%;
}
.media-gallery-overlay__mci-control {
  display: grid;
  grid-template-columns: 20px minmax(82px, 1fr) 20px 20px 20px 20px;
  align-items: center;
  gap: 2px;
  width: min(292px, calc(100% - 16px));
  min-height: 20px;
  padding: 2px 3px;
  border: 1px solid #5c5c5c;
  border-top-color: #f4f0e8;
  border-left-color: #f4f0e8;
  background: #d8d4c8;
  box-shadow: inset -1px -1px 0 #8a867a, inset 1px 1px 0 #fff;
}
.media-gallery-overlay__mci-button {
  width: 20px;
  height: 15px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 60px 15px;
  font-size: 0;
  cursor: pointer;
  image-rendering: pixelated;
}
.media-gallery-overlay__mci-button:disabled {
  opacity: .55;
  cursor: default;
}
.media-gallery-overlay__mci-button:not(:disabled):hover {
  background-position: -20px 0;
}
.media-gallery-overlay__mci-button:not(:disabled):active {
  background-position: -40px 0;
}
.media-gallery-overlay__mci-button--menu {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMCI_MENU.png");
}
.media-gallery-overlay__mci-button--scanl {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMCI_SCANL.png");
}
.media-gallery-overlay__mci-button--stop {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMCI_STOP.png");
}
.media-gallery-overlay__mci-button--playpause {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMCI_PLAY.png");
}
.media-gallery-overlay__mci-button--playpause.is-paused {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMCI_PAUSE.png");
}
.media-gallery-overlay__mci-button--scanr {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMCI_SCANR.png");
}
.media-gallery-overlay__mci-slider {
  width: 100%;
  height: 14px;
  margin: 0;
  accent-color: #20407a;
}
.media-gallery-overlay__mci-slider:disabled {
  opacity: .65;
}
.media-gallery-overlay__mci-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-top: 1px solid #707070;
  border-left: 1px solid #707070;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  background: #f8f8f8;
}
.media-gallery-overlay__mci-slider::-webkit-slider-thumb {
  width: 8px;
  height: 14px;
  margin-top: -6px;
  border: 1px solid #5c5c5c;
  border-top-color: #fff;
  border-left-color: #fff;
  border-radius: 0;
  background: #d8d4c8;
  box-shadow: inset -1px -1px 0 #8a867a;
  appearance: none;
}
.media-gallery-overlay__source-card {
  align-self: stretch;
  justify-self: stretch;
  overflow: auto;
  padding: 10px 12px;
  font: 12px/1.35 Georgia, "Times New Roman", serif;
  color: #211b15;
  background: #fff;
  min-width: 0;
}
.media-gallery-overlay__source-title {
  margin-bottom: 8px;
  font: bold 14px/1.2 Arial, Helvetica, sans-serif;
  color: #20386c;
}
.media-gallery-overlay__source-caption {
  max-width: 44em;
  overflow-wrap: anywhere;
}
.media-gallery-overlay__source-credit {
  margin-top: 10px;
  font-size: 10px;
  color: #7a2a1c;
  overflow-wrap: anywhere;
}
/* Title-only placeholder for MEDIA.M12 records whose FIF/FSM payload the web
   port can't yet decode (Charts / InterActivities, some Animations and Maps).
   Lighter parchment background so the user can tell at a glance this is a
   pending-decode record rather than a fully rendered asset. */
.media-gallery-overlay__source-card--undecoded {
  background: #f3eede;
  box-shadow: inset 0 0 0 1px #b0a890;
}
.media-gallery-overlay__midi-link {
  font: 10px/1.2 Georgia, serif;
  color: #5a3018;
  text-decoration: underline;
  text-align: center;
}
.media-pinpointer__item--empty {
  font-style: italic;
  color: #888;
  cursor: default;
}
/* Kind icons in the media list — small inline glyphs styled to mimic the
   Encarta sprite (🔊 speaker for audio, ◼ picture frame for stills, 🎞 film
   strip for video). Slightly larger and flat-color to read at 10px. */
.media-pinpointer__item--wav::before,
.media-pinpointer__item--midi::before,
.media-pinpointer__item--aud::before {
  content: "";
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1 5 L1 7 L3 7 L5 9 L5 3 L3 5 Z' fill='%23fff'/><path d='M7 4 Q8.5 6 7 8 M8.5 3 Q11 6 8.5 9' fill='none' stroke='%23fff' stroke-width='1'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 0;
}
.media-pinpointer__item--webm::before,
.media-pinpointer__item--vid::before {
  content: "";
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><rect x='2' y='3' width='8' height='6' fill='none' stroke='%23fff' stroke-width='1'/><rect x='1' y='2' width='2' height='1' fill='%23fff'/><rect x='9' y='2' width='2' height='1' fill='%23fff'/><rect x='1' y='9' width='2' height='1' fill='%23fff'/><rect x='9' y='9' width='2' height='1' fill='%23fff'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 0;
}
.media-pinpointer__item--pic::before,
.media-pinpointer__item--map::before,
.media-pinpointer__item--ani::before,
.media-pinpointer__item--int::before,
.media-pinpointer__item--cha::before {
  content: "";
  background: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 0;
}
.media-pinpointer__item--pic::before {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_PIC.png");
  background-size: 36px 12px;
  background-position: right center;
}
.media-pinpointer__item--map::before {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_MAP.png");
  background-size: 36px 12px;
  background-position: right center;
}
.media-pinpointer__item--ani::before {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_ANI.png");
  background-size: 36px 12px;
  background-position: right center;
}
.media-pinpointer__item--int::before {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_INT.png");
  background-size: 36px 12px;
  background-position: right center;
}
.media-pinpointer__item--cha::before {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_CHA.png");
  background-size: 36px 12px;
  background-position: right center;
}

/* Slideshow play state — outline the play button when the slideshow is
   running so users can see at a glance whether auto-advance is on. */
.media-gallery-overlay__transport.is-playing {
  outline: 2px solid #4a8d2a;
  outline-offset: -1px;
}
.media-gallery-overlay__player--midi {
  --midi-player-toolbar-background: #d8d4c8;
}

.media-gallery-overlay__viewer-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  background: #d8d4c8;
  border-top: 1px solid #a8a496;
  color: #1a1610;
}

.media-gallery-overlay__viewer-spacer {
  display: inline-block;
  width: 90px;
  height: 8px;
  background:
    linear-gradient(to right,
      #1a1610 0 4px,
      #707070 4px 90px);
}

.media-gallery-overlay__footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 6px;
  background: #20407a;
  color: #e8e4dc;
}

.media-gallery-overlay__slideshow-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.media-gallery-overlay__slideshow-label {
  font-weight: bold;
  font-size: 11px;
}

.media-gallery-overlay__transport,
.media-gallery-overlay__step {
  width: 20px;
  height: 15px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 60px 15px;
  font-size: 0;
  cursor: pointer;
  image-rendering: pixelated;
}

.media-gallery-overlay__transport:hover,
.media-gallery-overlay__step:hover {
  background-position: -20px 0;
}

.media-gallery-overlay__transport:active,
.media-gallery-overlay__step:active {
  background-position: -40px 0;
}

.media-gallery-overlay__transport--stop {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMCI_STOP.png");
}

.media-gallery-overlay__transport--play {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMCI_PLAY.png");
}

.media-gallery-overlay__step--back {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMCI_SCANL.png");
}

.media-gallery-overlay__step--next {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMCI_SCANR.png");
}

.media-gallery-overlay__counter {
  text-align: center;
  font-size: 11px;
}

.media-gallery-overlay__footer-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 3px;
}

.media-gallery-overlay__action {
  height: 15px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 0;
  cursor: pointer;
  image-rendering: pixelated;
}

.media-gallery-overlay__action:hover,
.media-gallery-overlay__action:focus-visible {
  background-position: 33.333% 0;
}

.media-gallery-overlay__action:disabled {
  background-position: 66.666% 0;
}

.media-gallery-overlay__action:active {
  background-position: 100% 0;
}

.media-gallery-overlay__action--large {
  width: 76px;
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_LARGEMEDIA.png");
}

.media-gallery-overlay__action--random {
  width: 59px;
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_RANDDWN.png");
}

.reader-panel {
  position: fixed;
  left: 122px;
  top: 94px;
  z-index: 30;
  width: 396px;
  max-height: 322px;
  display: grid;
  grid-template-rows: 19px minmax(0, 1fr);
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  box-shadow: 1px 1px 0 #000;
}

.reader-panel[hidden] {
  display: none;
}

.reader-panel__titlebar {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 17px;
  align-items: center;
  gap: 4px;
  padding: 1px 2px 2px 5px;
  color: #fff;
  background: linear-gradient(90deg, var(--title), var(--title2));
  font-weight: 700;
  line-height: 15px;
}

.reader-panel__titlebar span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-panel__titlebar button {
  width: 16px;
  height: 14px;
  padding: 0;
  color: #000;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  font: 700 10px/9px Arial, sans-serif;
}

.reader-panel__body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  padding: 8px;
  overflow: auto;
  border: 1px solid;
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
}

.reader-panel-search label {
  display: grid;
  gap: 4px;
  font-weight: 700;
}

.reader-panel-search input {
  width: 100%;
  height: 22px;
  padding: 2px 4px;
  color: #000;
  background: #fff;
  border: 2px solid;
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
  outline: 0;
}

.reader-panel-results {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}

.reader-panel-result {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 2px 5px;
  color: #000;
  background: #fff8ff;
  border: 1px solid;
  border-color: var(--light) var(--shadow) var(--shadow) var(--light);
  text-align: left;
}

.reader-panel-result strong,
.reader-panel-result span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-panel-result span {
  color: #404040;
  font-size: 10px;
}

.reader-panel-result.is-active,
.reader-panel-result:active {
  color: #fff;
  background: #000080;
}

.reader-panel-result.is-active span,
.reader-panel-result:active span {
  color: #fff;
}

.reader-panel-empty {
  padding: 8px;
  background: #fff8ff;
  border: 1px solid var(--shadow);
}

.reader-panel-letters {
  position: sticky;
  top: -8px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 0 0 5px;
  background: #c0c0c0;
}

.reader-panel-letters button {
  width: 23px;
  height: 19px;
  padding: 0;
  color: #000;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  font-size: 10px;
  line-height: 13px;
}

.reader-panel-letter-heading {
  display: block;
  padding: 2px 5px;
  color: #fff;
  background: #4f483f;
  font-size: 11px;
  line-height: 14px;
}

/* ---- Pinpointer panel (Encarta Find dialog, matches Steve frame) ---- */

.reader-panel.is-pinpointer {
  grid-template-rows: 17px minmax(0, 1fr);
  background: #d9d4c4;
  border: 1px solid #1a1610;
  box-shadow: 1px 1px 0 #000;
}

.reader-panel.is-pinpointer .reader-panel__titlebar {
  padding: 0 4px 0 6px;
  color: #fff;
  background: linear-gradient(180deg, #1f1a14 0%, #0f0c08 100%);
  border-bottom: 1px solid #1a1610;
  font: 10px/1 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  grid-template-columns: 1fr auto;
  gap: 0;
}

.reader-panel.is-pinpointer .reader-panel__titlebar span {
  letter-spacing: 2px;
}

.reader-panel.is-pinpointer .reader-panel__titlebar button {
  width: auto;
  height: 15px;
  padding: 0 6px;
  color: #fff;
  background: transparent;
  border: 0;
  border-left: 1px solid #c8c4b6;
  font: 10px/1 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.reader-panel.is-pinpointer .reader-panel__titlebar button::before {
  content: "Close";
  display: inline;
}

/* hide the original 'x' label so the ::before "Close" text shows alone */
.reader-panel.is-pinpointer #reader-panel-close {
  font-size: 0;
}
.reader-panel.is-pinpointer #reader-panel-close::before {
  font-size: 10px;
}

.reader-panel.is-pinpointer .reader-panel__body {
  display: grid;
  grid-template-rows: 17px 20px minmax(0, 1fr) 13px 18px;
  gap: 2px;
  padding: 3px;
  background: #d9d4c4;
  border: 0;
}

.reader-pinpointer__filter-row {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 3px;
  align-items: stretch;
}

.reader-pinpointer__filter {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  color: #1a1610;
  background: #efe9d8;
  border: 1px solid;
  border-color: #1a1610 #ffffff #ffffff #1a1610;
  font: 10px/1 "MS Sans Serif", Tahoma, sans-serif;
  text-align: left;
  cursor: pointer;
}

.reader-pinpointer__filter-arrow {
  font-size: 8px;
  line-height: 1;
}

.reader-pinpointer__reset {
  width: 44px;
  height: 17px;
  padding: 0;
  background-color: transparent;
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_RESET.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  border: 0;
  font-size: 0;
  cursor: pointer;
  image-rendering: pixelated;
}

.reader-pinpointer__reset:hover,
.reader-pinpointer__reset:focus-visible {
  background-position: -45px 0;
}

.reader-pinpointer__reset:active {
  background-position: -135px 0;
}

.reader-pinpointer__query {
  min-width: 0;
  min-height: 0;
}

.reader-pinpointer__query input {
  width: 100%;
  height: 20px;
  padding: 2px 4px;
  color: #000;
  background: #fff;
  border: 1px solid;
  border-color: #1a1610 #ffffff #ffffff #1a1610;
  box-shadow: inset 1px 1px 0 #8f8a80;
  font: 11px/14px "MS Sans Serif", Tahoma, sans-serif;
  outline: 0;
  box-sizing: border-box;
}

.reader-pinpointer__body {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 46px;
  gap: 2px;
  overflow: hidden;
}

.reader-pinpointer__list {
  min-height: 0;
  display: block;
  padding: 1px;
  background: #f6f1e0;
  border: 1px solid;
  border-color: #1a1610 #ffffff #ffffff #1a1610;
  overflow-y: auto;
}

.reader-panel.is-pinpointer .reader-panel-result {
  display: block;
  min-height: 0;
  padding: 0 4px;
  color: #1a1610;
  background: transparent;
  border: 0;
  font: 11px/14px "MS Sans Serif", Tahoma, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reader-panel.is-pinpointer .reader-panel-result strong {
  font-weight: 400;
}

.reader-panel.is-pinpointer .reader-panel-result span {
  display: none; /* hide topic/media-refs badges — Steve shows titles only */
}

.reader-panel.is-pinpointer .reader-panel-result.is-active,
.reader-panel.is-pinpointer .reader-panel-result:hover {
  color: #fff;
  background: #2a2620;
}

.reader-pinpointer__sidebar {
  display: grid;
  grid-template-rows: repeat(5, 45px) 17px;
  gap: 2px;
  align-content: start;
  justify-items: center;
}

.reader-pinpointer__icon {
  width: 45px;
  height: 45px;
  padding: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: 0 0;
  border: 0;
  font-size: 0;
  cursor: pointer;
  image-rendering: pixelated;
}

.reader-pinpointer__icon:hover,
.reader-pinpointer__icon:focus-visible {
  background-position: -45px 0;
}

.reader-pinpointer__icon:active {
  background-position: -135px 0;
}

.reader-pinpointer__icon--word {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_WORDS.png");
}

.reader-pinpointer__icon--cat {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_CATEG.png");
}

.reader-pinpointer__icon--time {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_TIME.png");
}

.reader-pinpointer__icon--place {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_PLACE.png");
}

.reader-pinpointer__icon--media {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_MEDIA.png");
}

.reader-pinpointer__icon--wizard {
  width: 45px;
  height: 17px;
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCORG_WIZARD.png");
}

.reader-pinpointer__count {
  padding: 0 6px;
  color: #1a1610;
  background: transparent;
  font: italic 700 11px/13px "MS Sans Serif", Tahoma, sans-serif;
  text-align: right;
}

.reader-pinpointer__related {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  color: #1a1610;
  background: #d59a3a;
  border: 1px solid;
  border-color: #ffd47a #5a3e10 #5a3e10 #ffd47a;
  font: 10px/1 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}

/* Reposition the panel itself when in pinpointer mode: full-height left
   column, overlapping the Views aside, matching Steve's pinpointer-panel. */
body.reader-mode .reader-panel.is-pinpointer {
  left: 0;
  top: 74px;
  width: 195px;
  height: 406px;
  max-height: 406px;
  z-index: 8;
}

.reader-featured-media {
  width: 218px;
  height: 210px;
  float: left;
  margin: 9px 10px 6px 0;
  background-repeat: no-repeat;
  background-size: 640px 480px;
}

.reader-section-start {
  margin: 12px 3px 6px 230px;
}

.reader-section-head {
  height: 16px;
  padding: 2px 6px;
  color: #fff;
  /* Encarta intro/section strip: dark olive-brown chrome with a faint
     1-px top highlight (matches Steve Aare/Akhmatova/Michigan frames). */
  background: linear-gradient(180deg, #5a5249 0%, #463f37 100%);
  border-top: 1px solid #6a6258;
  border-bottom: 1px solid #2a2520;
  font: 10px/12px "MS Sans Serif", Tahoma, Arial, sans-serif;
  letter-spacing: 0;
}

.reader-topic-link {
  min-height: 18px;
  padding: 3px 0 2px 17px;
  color: #b62a3a;
  font: 11px/14px "MS Sans Serif", Tahoma, Arial, sans-serif;
  position: relative;
}

/* CSS-only red ▶ play triangle (border trick) — matches the speaker/play
   indicator next to "Anna Akhmatova" / "Lake Michigan" in the reference
   frames. Color is the Encarta vermilion #b62a3a. */
.reader-topic-link::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #b62a3a;
}

.reader-xref {
  color: #c04040;
  text-decoration: none;
  cursor: pointer;
}

.reader-xref:hover {
  text-decoration: underline;
}

.reader-smallcaps {
  font-variant: small-caps;
  font-weight: normal;
  letter-spacing: 0.5px;
}

/* encarta-audio R2 — article narration / sample audio.  Sits below the
   Introduction section header (in the .reader-article-audio-slot
   container) and renders one chiseled Win9x button per AUDIO.M12 clip
   mapped to the active article's media_refs.  Layout matches the
   reader-topic-link strip — same left margin (230px from the
   watermark) and same 11px MS Sans Serif vermilion type. */
.reader-article-audio-slot {
  margin: 0 3px 0 230px;
}

.reader-article-audio {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 4px 0 6px;
}

.reader-article-audio__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  /* Chiseled Win9x button — same recipe as the .reader-hero figcaption
     "Caption" chip (top/left light, bottom/right dark, inset shadow
     for the highlight ring). */
  color: #000;
  background: #d8d2c8;
  border: 1px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
  font: 11px/13px "MS Sans Serif", Tahoma, Arial, sans-serif;
  cursor: pointer;
  min-height: 18px;
}

.reader-article-audio__btn:hover {
  background: #e0dad0;
}

/* Pressed / playing state — invert the bevel so the button looks pushed
   in (matching Win9x system behaviour for active toggles). */
.reader-article-audio__btn:active,
.reader-article-audio__btn.is-playing {
  background: #c8c2b8;
  border-color: #404040 #ffffff #ffffff #404040;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
}

/* CSS-only red ▶ play triangle (same border trick as reader-topic-link
   uses for the speaker chip — keeps the visual language consistent
   with R7's chip and the World Music Solo/Ensemble buttons). */
.reader-article-audio__icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #b62a3a;
}

.reader-article-audio__label {
  color: #b62a3a;
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* quick-wins W4 — Article MIDI row.  Mirrors the audio row's chiseled
   button look but swaps the red play triangle for a green ♫ note
   so users can distinguish the two surfaces at a glance.  The
   hidden <midi-player> below the button row mounts only after a
   click (saves the ~10MB soundfont load otherwise). */
.reader-article-midi-slot {
  margin: 0 3px 0 230px;
}

.reader-article-midi .reader-article-midi__icon {
  /* Override the triangle from .reader-article-audio__icon — MIDIs
     show a green eighth-note glyph instead of a play arrow. */
  border: 0;
  width: auto;
  height: auto;
  color: #2a7a3a;
  font: 12px/12px "Lucida Grande", Arial, sans-serif;
  line-height: 1;
}

.reader-article-midi__more {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  color: #5c5448;
  font: italic 11px/13px "MS Sans Serif", Tahoma, sans-serif;
}

.reader-article-midi__host {
  flex: 1 1 100%;
  margin-top: 6px;
}

.reader-article-midi__player {
  width: 100%;
  border: 1px solid #898373;
  background: #f1ecd5;
}

/* Hero image — floats into the article body's left margin, replacing the
   watermark for articles that have an extracted image. Click to enlarge. */
.reader-hero {
  float: left;
  width: 218px;
  margin: 4px 12px 8px 4px;
  padding: 0;
  background: #d8d2c8;
  border: 1px solid #807870;
  cursor: pointer;
  position: relative;
}

.reader-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
}

/* Inline-media caption chip — Win9x cream button with a chiseled bevel
   (top/left light, bottom/right dark). Matches the small "Caption" button
   visible in the Lake Michigan reference frames (anchored 3px in from the
   hero's bottom-right corner). */
.reader-hero figcaption {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 1px 6px;
  color: #000;
  background: #d8d2c8;
  border: 1px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
  font: 11px/13px "MS Sans Serif", Tahoma, Arial, sans-serif;
}

.reader-hero:hover {
  outline: 1px solid #c04040;
}

.reader-feature-card {
  float: left;
  width: 218px;
  height: 210px;
  margin: 4px 12px 8px 4px;
  padding: 0;
  position: relative;
  color: #000;
  background: #d7d2c5;
  border: 1px solid #817a70;
  box-shadow: inset 1px 1px 0 #f2eee3, inset -1px -1px 0 #716b64;
  cursor: pointer;
  overflow: hidden;
}

.reader-feature-card__title {
  height: 18px;
  padding: 2px 5px;
  color: #fff;
  background: #5a5147;
  border-bottom: 1px solid #2f2a25;
  font: 10px/13px "MS Sans Serif", Tahoma, Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reader-feature-card__preview {
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  bottom: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e5e0d2;
}

.reader-feature-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}

.reader-feature-card__preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.reader-feature-card__preview audio {
  width: calc(100% - 16px);
}

.reader-feature-card__preview a {
  color: #5c2130;
  font: 12px/14px "MS Sans Serif", Tahoma, Arial, sans-serif;
}

.reader-feature-card__missing {
  width: 74px;
  height: 58px;
  border: 1px solid #7f7269;
  background:
    linear-gradient(135deg, transparent 47%, #9b8e80 48% 52%, transparent 53%) 14px 11px / 46px 32px no-repeat,
    linear-gradient(45deg, transparent 47%, #9b8e80 48% 52%, transparent 53%) 14px 11px / 46px 32px no-repeat,
    #eee8de;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #807870;
}

.reader-feature-card__missing--chart {
  width: 100%;
  height: 100%;
  border: 0;
  background:
    linear-gradient(to top, #2c4f9b 0 100%, transparent 0) 31px 26px / 14px 104px no-repeat,
    linear-gradient(to top, #98233e 0 100%, transparent 0) 54px 74px / 14px 56px no-repeat,
    linear-gradient(to top, #3c7b54 0 100%, transparent 0) 78px 107px / 14px 23px no-repeat,
    conic-gradient(from 20deg, #426c4d 0 78deg, #6f9a5b 78deg 182deg, #a1be88 182deg 360deg) 112px 17px / 122px 122px no-repeat,
    repeating-linear-gradient(to bottom, #d9d3c4 0 17px, #eee9dc 17px 30px);
  box-shadow: none;
}

.reader-feature-card__label {
  position: absolute;
  left: 9px;
  right: 8px;
  bottom: 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 6px;
  color: #8a4a55;
  font: italic 22px/1 Georgia, "Times New Roman", serif;
  background: rgba(248, 241, 230, 0.86);
}

.reader-feature-card__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid #7f7269;
  background:
    linear-gradient(to top, #8f213b 0 17px, transparent 17px) 9px 18px / 6px 20px no-repeat,
    linear-gradient(to top, #8f213b 0 28px, transparent 28px) 19px 7px / 6px 31px no-repeat,
    linear-gradient(to top, #8f213b 0 12px, transparent 12px) 29px 23px / 6px 15px no-repeat,
    #eee8de;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #807870;
}

.reader-feature-card__caption {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 1px 6px;
  color: #000;
  background: #d8d2c8;
  border: 1px solid;
  border-color: #ffffff #404040 #404040 #ffffff;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
  font: 11px/13px "MS Sans Serif", Tahoma, Arial, sans-serif;
}

.reader-feature-card:hover {
  outline: 1px solid #c04040;
}

.reader-inline-media {
  display: inline-block;
  margin: 6px 14px 8px 230px;
  padding: 4px;
  max-width: calc(100% - 244px);
  background: #f6f1e0;
  border: 1px solid #807870;
  cursor: pointer;
}

.reader-inline-media--lead {
  display: block;
  float: right;
  width: max-content;
  margin: 4px 0 7px 4px;
}

.reader-inline-media img {
  display: block;
  max-width: 260px;
  height: auto;
}

.reader-inline-media--lead img {
  max-width: 190px;
}

.reader-inline-media:hover {
  outline: 1px solid #c04040;
}

/* Text view modes — strip the left margin so prose fills the full width
   and hide the watermark + hero image. */
#reader-view[data-view-mode="text"] .reader-article__body h2,
#reader-view[data-view-mode="text-outline"] .reader-article__body h2,
#reader-view[data-view-mode="text"] .reader-article__body p,
#reader-view[data-view-mode="text-outline"] .reader-article__body p {
  margin-left: 14px;
  max-width: none;
}

#reader-view[data-view-mode="text"],
#reader-view[data-view-mode="text-outline"] {
  background-image: none !important;
}

#reader-view[data-view-mode="text"] .reader-hero,
#reader-view[data-view-mode="text-outline"] .reader-hero,
#reader-view[data-view-mode="text"] .reader-feature-card,
#reader-view[data-view-mode="text-outline"] .reader-feature-card,
#reader-view[data-view-mode="text"] .reader-inline-media,
#reader-view[data-view-mode="text-outline"] .reader-inline-media {
  display: none;
}

/* Inline outline list — shown at top of article body for "Outline" modes. */
.reader-outline-inline {
  margin: 6px 14px 10px 230px;
  padding: 4px 6px;
  display: grid;
  gap: 1px;
  background: #efe8e0;
  border: 1px solid #aaa298;
  font: 11px/14px Georgia, "Times New Roman", serif;
}

#reader-view[data-view-mode="text-outline"] .reader-outline-inline {
  margin-left: 14px;
}

.reader-outline-inline button {
  text-align: left;
  background: transparent;
  border: 0;
  color: #c04040;
  padding: 2px 4px;
  cursor: pointer;
  font: inherit;
}

.reader-outline-inline button:hover {
  text-decoration: underline;
}

/* Image modal (clicking the hero image) */
.reader-image-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
}

.reader-image-modal[hidden] {
  display: none;
}

.reader-image-modal__frame {
  display: grid;
  grid-template-rows: 18px 1fr auto;
  max-width: 560px;
  max-height: 92%;
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
}

.reader-image-modal__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 4px 2px 6px;
  background: #5060a8;
  color: #fff;
  font: 11px/14px "MS Sans Serif", Tahoma, Arial, sans-serif;
}

.reader-image-modal__title::before {
  content: "▾ ";
}

.reader-image-modal__close {
  background: transparent;
  border: 0;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.reader-image-modal__close:hover {
  text-decoration: underline;
}

.reader-image-modal__body {
  overflow: auto;
  background: #000;
  min-height: 220px;
}

.reader-image-modal__body img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.reader-image-modal__placeholder {
  width: 320px;
  height: 220px;
  margin: 0 auto;
  background:
    linear-gradient(135deg, transparent 48%, #8b8176 49% 51%, transparent 52%) 93px 66px / 134px 88px no-repeat,
    linear-gradient(45deg, transparent 48%, #8b8176 49% 51%, transparent 52%) 93px 66px / 134px 88px no-repeat,
    #eee8de;
}

.reader-image-modal__caption {
  padding: 6px 10px 8px;
  background: #c0c0c0;
  font: 11px/14px "MS Sans Serif", Tahoma, Arial, sans-serif;
  color: #000;
  min-height: 32px;
  white-space: pre-line;
}

.reader-media {
  float: left;
  width: 218px;
  margin: 8px 10px 12px 2px;
  padding: 7px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
}

.reader-media strong {
  display: block;
  margin-bottom: 5px;
}

.reader-media__list {
  display: grid;
  gap: 4px;
}

.reader-media__asset {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 3px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--shadow);
  cursor: default;
}

.reader-media__asset:active {
  background: #ffffe8;
}

.reader-media__asset img {
  max-width: 100%;
  max-height: 135px;
  justify-self: center;
  image-rendering: auto;
}

.reader-media__placeholder {
  width: 100%;
  min-height: 42px;
  display: grid;
  place-items: center;
  background: #efeee0;
  border: 1px solid #8a887c;
}

.reader-media__asset figcaption {
  display: grid;
  gap: 2px;
  overflow-wrap: anywhere;
  font-size: 10px;
  line-height: 1.2;
}

.reader-media__kind {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 4px 1px 2px;
  color: #000;
  background: #efeee0;
  border: 1px solid #8a887c;
}

.media-type-icon {
  display: inline-block;
  flex: none;
  width: 69px;
  height: 73px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 207px 73px;
  image-rendering: pixelated;
}

.media-type-icon--small {
  width: 18px;
  height: 19px;
  background-size: 54px 19px;
}

.reader-media__asset:hover .media-type-icon,
.reader-media__asset:focus-within .media-type-icon {
  background-position: 50% 0;
}

.reader-media__asset:active .media-type-icon {
  background-position: 100% 0;
}

.media-type-icon--pic {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_PIC.png");
}

.media-type-icon--aud {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_AUD.png");
}

.media-type-icon--vid {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_VID.png");
}

.media-type-icon--ani {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_ANI.png");
}

.media-type-icon--map {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_MAP.png");
}

.media-type-icon--cha {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_CHA.png");
}

.media-type-icon--int {
  background-image: url("extracted/ne-resources/encart95-png/ENCART95.EXE_2_ENCMED_INT.png");
}

.reader-media__list > span {
  padding: 2px 4px;
  background: #fff;
  border: 1px solid var(--shadow);
  overflow-wrap: anywhere;
  font-size: 10px;
}

.reader-empty {
  padding: 10px;
  background: #fff;
  border: 1px solid #5a514c;
}

.ui-board__stage {
  min-width: 0;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: 14px;
  background: #008080;
  border: 2px solid;
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.ui-atlas {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto 1fr;
  gap: 8px;
  min-height: 0;
}

body.ui-reference-capture-mode .ui-atlas {
  grid-template-rows: 1fr;
}

body.ui-reference-capture-mode .ui-board {
  grid-template-columns: 1fr;
}

body.ui-reference-capture-mode .ui-board__stage {
  display: none;
}

body.ui-reference-capture-mode .ui-atlas__overview,
body.ui-reference-capture-mode .ui-atlas__examples,
body.ui-reference-capture-mode .ui-atlas__dialogs,
body.ui-reference-capture-mode .ui-atlas__menus,
body.ui-reference-capture-mode .ui-atlas__commands,
body.ui-reference-capture-mode .ui-palette {
  display: none;
}

.ui-atlas__overview,
.ui-atlas__examples,
.ui-atlas__dialogs,
.ui-atlas__menus,
.ui-atlas__commands,
.ui-atlas__references,
.ui-palette {
  min-width: 0;
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  box-shadow: 1px 1px 0 #000;
}

.ui-atlas__overview {
  display: grid;
  gap: 8px;
  padding: 8px;
}

.ui-atlas__sources {
  display: grid;
  gap: 6px;
}

.ui-atlas__sources-label {
  font-size: 11px;
  font-weight: 700;
}

.ui-atlas__source-list {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 118px;
  overflow: auto;
}

.ui-atlas__source-chip {
  min-width: 0;
  max-width: 100%;
  height: 22px;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
}

.ui-atlas__source-chip:active,
.ui-atlas__source-chip.is-active {
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
  padding: 2px 6px 0 10px;
}

.ui-atlas__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--shadow);
}

.ui-atlas__header strong {
  font-size: 12px;
}

.ui-atlas__header span {
  color: #404040;
  font-size: 10px;
}

.ui-atlas__stats {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
}

.ui-atlas__stats dt {
  color: #202020;
}

.ui-atlas__stats dd {
  font-weight: 700;
}

.ui-atlas__examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.ui-atlas__example-col {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.ui-atlas__example-col h3 {
  margin: 0;
  padding: 2px 4px;
  font-size: 11px;
  color: #fff;
  background: #000080;
}

.ui-atlas__example-list {
  min-width: 0;
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
}

.ui-atlas__example,
.ui-atlas__example-empty {
  min-width: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--shadow);
}

.ui-atlas__example {
  display: grid;
  gap: 4px;
}

.ui-atlas__example strong {
  font-size: 11px;
  overflow-wrap: anywhere;
}

.ui-atlas__example-lines {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 2px;
  font-size: 10px;
  line-height: 1.3;
}

.ui-atlas__example-lines li {
  overflow-wrap: anywhere;
}

.ui-atlas__dialogs {
  min-height: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
}

.ui-atlas__menus {
  min-height: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
}

.ui-atlas__commands {
  min-height: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
}

.ui-atlas__references {
  min-height: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
}

.ui-atlas__dialogs h3,
.ui-atlas__menus h3,
.ui-atlas__commands h3,
.ui-atlas__references h3 {
  margin: 0;
  padding: 2px 4px;
  font-size: 11px;
  color: #fff;
  background: #000080;
}

.ui-atlas__dialog-list {
  min-height: 0;
  max-height: 250px;
  overflow: auto;
  display: grid;
  gap: 8px;
}

.ui-atlas__menu-list {
  min-height: 0;
  max-height: 220px;
  overflow: auto;
  display: grid;
  gap: 8px;
}

.ui-atlas__command-list {
  min-height: 0;
  max-height: 220px;
  overflow: auto;
  display: grid;
  gap: 8px;
}

.ui-reference-grid {
  min-width: 0;
  max-height: 560px;
  overflow: auto;
  display: grid;
  gap: 6px;
}

body.ui-reference-capture-mode .ui-reference-grid {
  max-height: none;
}

.ui-reference-filters {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ui-reference-filter {
  max-width: 150px;
  min-width: 0;
  height: 22px;
  padding: 0 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
}

.ui-reference-filter.is-active,
.ui-reference-filter:active {
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
  padding: 2px 5px 0 9px;
}

.ui-reference-section {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.ui-reference-section h4 {
  margin: 0;
  padding: 2px 4px;
  color: #fff;
  background: #5a514c;
  font-size: 11px;
}

.ui-reference-card-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px;
}

.ui-reference-card {
  min-width: 0;
  margin: 0;
  padding: 6px;
  display: grid;
  position: relative;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--shadow);
  cursor: default;
}

.ui-reference-card.is-selected {
  outline: 2px solid #000080;
  outline-offset: -3px;
}

.ui-reference-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  image-rendering: pixelated;
  background: #000;
}

.ui-reference-card figcaption {
  min-width: 0;
  display: grid;
  gap: 2px;
  overflow-wrap: anywhere;
  font-size: 10px;
  color: #404040;
}

.ui-reference-card figcaption strong {
  min-width: 0;
  color: #000;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.ui-reference-card figcaption span {
  min-width: 0;
  color: #404040;
  font-size: 10px;
}

.ui-reference-card__select {
  width: max-content;
  max-width: 100%;
  height: 20px;
  padding: 0 7px;
  color: #000;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  font-size: 10px;
}

.ui-reference-card__select:active {
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
  padding: 2px 5px 0 9px;
}

.ui-reference-card__count {
  position: absolute;
  right: 6px;
  top: 6px;
  min-width: 18px;
  height: 16px;
  padding: 1px 4px;
  color: #fff;
  background: #000080;
  border: 1px solid #fff;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
}

.ui-reference-compare {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 7px;
  background: #d6d2cf;
  border: 2px solid;
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.ui-reference-compare__header {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ui-reference-compare__header strong,
.ui-reference-compare__header span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-reference-compare__header span {
  color: #404040;
  font-size: 10px;
}

.ui-reference-compare__controls {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.ui-reference-compare__button {
  height: 22px;
  padding: 0 8px;
  color: #000;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
}

.ui-reference-compare__button.is-active,
.ui-reference-compare__button:active {
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
  padding: 2px 6px 0 10px;
}

.ui-reference-compare__opacity {
  min-width: 150px;
  display: grid;
  grid-template-columns: auto minmax(70px, 1fr);
  align-items: center;
  gap: 5px;
  font-size: 10px;
}

.ui-reference-compare__opacity input {
  width: 100%;
  height: 18px;
}

.ui-reference-compare__meta {
  margin: 0;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--shadow);
  font-size: 10px;
}

.ui-reference-compare__meta dt,
.ui-reference-compare__meta dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ui-reference-compare__view {
  min-width: 0;
}

.ui-reference-compare__view--side-by-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.ui-reference-compare__view--overlay {
  display: grid;
}

.ui-reference-compare__pane {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(96px, 1fr) auto;
  gap: 3px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--shadow);
}

.ui-reference-series-strip {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.ui-reference-series-strip h4 {
  margin: 0;
  padding: 2px 4px;
  color: #fff;
  background: #5a514c;
  font-size: 11px;
}

.ui-reference-series-strip__rail {
  min-width: 0;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 5px;
  background: #fff;
  border: 2px solid;
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.ui-reference-series-strip__frame {
  flex: 0 0 82px;
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 3px;
  color: #000;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  font-size: 10px;
}

.ui-reference-series-strip__frame.is-selected,
.ui-reference-series-strip__frame:active {
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.ui-reference-series-strip__frame img {
  width: 72px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #000;
}

.ui-reference-series-strip__frame span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-reference-compare__pane strong,
.ui-reference-compare__pane span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.ui-reference-compare__pane span {
  color: #404040;
}

.ui-reference-compare__visual {
  min-width: 0;
  min-height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

.ui-reference-compare__visual img {
  max-width: 100%;
  max-height: 180px;
  image-rendering: pixelated;
  object-fit: contain;
}

.ui-reference-compare__overlay {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--shadow);
}

.ui-reference-compare__overlay-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.ui-reference-compare__overlay-img--original {
  mix-blend-mode: normal;
}

.ui-reference-compare__missing {
  width: 100%;
  min-height: 96px;
  display: grid;
  place-content: center;
  gap: 3px;
  padding: 8px;
  color: #fff;
  text-align: center;
  background: #000;
  border: 1px dotted #fff;
}

.ui-reference-compare__missing--overlay {
  position: absolute;
  inset: 0;
}

.ui-reference-compare__missing strong,
.ui-reference-compare__missing span {
  overflow-wrap: anywhere;
  font-size: 10px;
}

.ui-dialog-card {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--shadow);
}

.ui-dialog-card__title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ui-dialog-card__title strong,
.ui-dialog-card__title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-dialog-card__title span {
  color: #404040;
  font-size: 10px;
}

.ui-dialog-preview {
  position: relative;
  width: 100%;
  min-height: 72px;
  max-height: 180px;
  overflow: hidden;
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
}

.ui-dialog-control {
  position: absolute;
  min-width: 2px;
  min-height: 2px;
  overflow: hidden;
  padding: 1px 2px;
  color: #000;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #404040;
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
}

.ui-dialog-control--button {
  background: #c0c0c0;
  border-color: #fff #404040 #404040 #fff;
}

.ui-dialog-control--edit,
.ui-dialog-control--listbox {
  background: #fff;
  border-color: #404040 #fff #fff #404040;
}

.ui-dialog-control--static {
  background: transparent;
  border-color: transparent;
}

.ui-menu-card {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--shadow);
}

.ui-menu-card__title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ui-menu-card__title strong,
.ui-menu-card__title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-menu-card__title span {
  color: #404040;
  font-size: 10px;
}

.ui-menu-tree,
.ui-menu-tree ul {
  min-width: 0;
  margin: 0;
  padding-left: 14px;
  display: grid;
  gap: 2px;
  list-style: none;
}

.ui-menu-tree {
  padding-left: 0;
}

.ui-menu-tree li {
  min-width: 0;
}

.ui-menu-tree span {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 3px;
  overflow: hidden;
  border-left: 2px solid #c0c0c0;
  font-size: 10px;
}

.ui-menu-tree small {
  color: #404040;
  font-size: 10px;
}

.ui-command-card {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--shadow);
}

.ui-command-card__title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ui-command-card__title strong,
.ui-command-card__title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-command-card__title span {
  color: #404040;
  font-size: 10px;
}

.ui-command-card__rows {
  margin: 0;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 3px 6px;
  font-size: 10px;
  line-height: 1.25;
}

.ui-command-card__rows dt {
  color: #404040;
}

.ui-command-card__rows dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 400;
}

.mindmaze-board {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(360px, 1.4fr);
  gap: 8px;
  min-height: 0;
}

.mindmaze-board[hidden] {
  display: none;
}

.mindmaze-stage {
  min-width: 0;
  display: grid;
  grid-template-rows: 300px 137px 13px;
  background: #000;
}

.mindmaze-stage[data-mm-phase="login"] {
  grid-template-rows: 437px 13px;
}

.mindmaze-stage__scene {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #000;
}

.mindmaze-stage[data-mm-phase="login"] .mindmaze-stage__scene {
  grid-row: 1;
}

.mindmaze-stage__scene img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

/* NPC sprite (jester, geisha, king, sorceress…) overlays the room scene.
   Legacy positioning (right-aligned, 92% scene height) is the fallback
   used for the setup-screen sorceress + before the R18 manifest loads. */
.mindmaze-stage__scene img.mm-scene-npc {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: auto;
  height: 92%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  image-rendering: pixelated;
}

/* R18 — when the NPC manifest is loaded, the sprite is placed via the
   binary's xy/src_w/src_h coords (see mindmaze-npcs.json). Inline
   left/top/width/height percentages override the legacy fallback;
   we also clear object-fit (the sprite IS the sized rect, no need to
   contain it). The .mm-scene-npc--scaled marker class is toggled by
   applyMmNpcOverlay so reverting to the fallback is one classList
   toggle away. */
.mindmaze-stage__scene img.mm-scene-npc--scaled {
  right: auto;
  bottom: auto;
  object-fit: fill;
  object-position: left top;
}

/* Speech bubble — NPC dialogue from MM95.EXE seg 1230 (per question). */
.mm-dialogue-bubble {
  position: absolute;
  left: 6px;
  top: 6px;
  max-width: 260px;
  background: #fffdf0;
  color: #1a1610;
  border: 1px solid #1a1610;
  border-radius: 6px;
  padding: 6px 8px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  font: 11px/1.3 "MS Sans Serif", Tahoma, sans-serif;
  pointer-events: none;
  z-index: 4;
}

.mm-dialogue-bubble::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -8px;
  width: 12px;
  height: 8px;
  background: #fffdf0;
  border-right: 1px solid #1a1610;
  border-bottom: 1px solid #1a1610;
  transform: skewX(-20deg);
}

.mm-dialogue-bubble p {
  margin: 0;
}

.mindmaze-stage__bar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 8px;
  color: #fff;
  background: #000080;
  border: 2px solid;
  border-color: #d8d8d8 #202020 #202020 #d8d8d8;
  box-shadow: 1px 1px 0 #000;
}

/* Mind Maze game screens */

.mm-login-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 25px 56px 58px;
}

.mm-login-overlay[hidden] { display: none; }

.mm-login-instructions {
  display: none;
}

.mm-login-instructions p {
  margin: 0 0 3px;
}

.mm-login-panel {
  display: grid;
  grid-template-rows: 18px 18px 70px 20px;
  gap: 1px;
  align-self: flex-end;
  background: #f0ece2;
  border: 2px solid;
  border-color: #f5f5ef #4d443a #4d443a #f5f5ef;
  box-shadow: 1px 1px 0 #1e1a17;
  padding: 2px;
  width: 145px;
}

.mm-login-panel__btns {
  display: flex;
  gap: 2px;
}

.mm-login-panel__btns button,
.mm-login-panel > button {
  flex: 1;
  padding: 0 4px;
  font-size: 11px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  box-shadow: none;
  cursor: pointer;
}

.mm-new-player-row {
  display: flex;
}

.mm-new-player-row[hidden] { display: none; }

.mm-new-player-row input {
  width: 100%;
  height: 18px;
  padding: 1px 3px;
  font-size: 11px;
  background: #fff;
  border: 2px solid;
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.mm-player-list {
  height: 70px;
  overflow-y: auto;
  background: #fff8ef;
  border: 1px solid #81786c;
  font-size: 12px;
  cursor: default;
  outline: none;
}

.mm-player-item {
  padding: 1px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.mm-player-item.is-selected {
  background: #000080;
  color: #fff;
}

.mm-player-item--empty {
  color: #606060;
  font-style: italic;
}

/* The MindMaze 95 question scroll.  The original game paints BANNER.DI$
 * (a 363x301 illuminated banner from MM95BAG.M12, referenced by seg 70
 * 0x9982 in the BANNER branch — the alternate DIALOG branch paints
 * DIALOG.DI$ for the feedback popup).  The illuminated "Q" is baked into
 * the bitmap, so the web shell renders text in the empty parchment area
 * to the right of it.  Aspect ratio matches the bitmap so the inset
 * text region tracks the parchment box exactly. */
/* MindMaze 95 question scroll. MM95 seg 70:0x9982 pushes BANNER.DI$
 * (at 0x9dc0) when [bp+0xa] != 0; the resulting widget's layout
 * struct is written at the same site:
 *   [si+0xca] = 0x16a (362)   ; bitmap right (width − 1)
 *   [si+0xcc] = 0x12c (300)   ; bitmap bottom (height − 1)
 *   [si+0xce] = 0xc2  (194)   ; clip-rect LEFT (playfield px)
 *   [si+0xd0] = 0x5f  ( 95)   ; clip-rect TOP
 *   [si+0xd2] = 0x181 (385)   ; clip-rect RIGHT
 *   [si+0xd4] = 0xfd  (253)   ; clip-rect BOTTOM
 * The per-frame paint method at seg 70:0x9b22 blits the 2-up sheet
 * to dest (0x43, 0) = (67, 0) on the playfield. Subtracting that
 * origin from the clip-rect gives the in-bitmap text-safe region:
 *   bitmap-local rect = (127, 95, 318, 253) inside the 363×301 sheet
 * which converts to the CSS inset percentages used below. */
.mm-question-scroll {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 60%;
  max-width: calc(100% - 12px);
  aspect-ratio: 363 / 301;
  background-image: url("data/mindmaze-frames/BANNER.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;
  background-color: transparent;
  overflow: hidden;
  pointer-events: none;
  /* No z-index hack — the R10 Prong C state-machine fix hides the
   * NPC dialogue bubble (.mm-dialogue-bubble) whenever a Q-scroll
   * is active, so the BANNER and bubble are never visible at the
   * same time. (R9 used `z-index: 5` here to keep BANNER above the
   * bubble at z-index 4; that band-aid is now obsolete.) */
}

.mm-question-scroll[hidden] { display: none; }

/* The illuminated "Q" is part of BANNER.DI$ — no separate element needed.
 * The legacy `.mm-question-scroll__q` div is hidden when the bitmap is
 * present, preserved as a no-op fallback so older smoke captures that
 * still have the element in the DOM don't render a stray glyph. */
.mm-question-scroll__q {
  display: none;
}

/* Question text overlays the clean parchment area to the right of the
 * illuminated Q.  The inset percentages are derived from the layout-rect
 * words written by seg 70:0x9982 (BANNER branch) above.  Converted to
 * percentages of the 363×301 bitmap:
 *   left   = 127 / 363 = 34.99 %
 *   top    =  95 / 301 = 31.56 %
 *   right  = (363 − 318) / 363 = 12.40 %
 *   bottom = (301 − 253) / 301 = 15.95 %
 */
.mm-question-scroll__text {
  position: absolute;
  left: 35%;
  top: 31.6%;
  right: 12.4%;
  bottom: 16%;
  margin: 0;
  padding: 0;
  color: #1a1610;
  font: 13px/1.35 Georgia, "Times New Roman", serif;
  overflow-y: auto;
  pointer-events: auto;
}

.mm-exit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mm-exit-overlay[hidden] { display: none; }

.mm-exit-dialog {
  width: 230px;
  background: linear-gradient(#2d457d 0 118px, #aaa690 118px);
  border: 1px solid;
  border-color: #f4f1df #302d27 #302d27 #f4f1df;
  box-shadow: 2px 2px 0 #000;
  padding: 46px 30px 17px;
  text-align: center;
  font: 14px/1 "MS Sans Serif", Tahoma, sans-serif;
}

.mm-exit-dialog p {
  margin: 0 0 40px;
  color: #fff;
  font: bold 15px/1 Georgia, "Times New Roman", serif;
  text-shadow: 1px 1px 0 #5f5a4d;
}

.mm-exit-dialog button {
  display: inline-block;
  width: 64px;
  margin: 0 6px;
  padding: 4px 0;
  color: #fff;
  font-size: 13px;
  background: transparent;
  border: 1px solid;
  border-color: #fff #6d6758 #6d6758 #fff;
  box-shadow: none;
  cursor: pointer;
}

/* MindMaze reference-prompt — MM95 seg-1228 c542 "Would you like to see
   an article about <X>?" prompt. The binary paints this through the
   DIALOG branch of seg 70:0x9982 ([bp+0xa] == 0 → push DIALOG.DI$ at
   0x9dcc). Layout-rect words written by that same function at the
   DIALOG site:
     [si+0xca] = 0x121 (289)   ; bitmap right (290 − 1)
     [si+0xcc] = 0xf0  (240)   ; bitmap bottom (241 − 1)
     [si+0xce] = 0x63  ( 99)   ; clip-rect LEFT (playfield px)
     [si+0xd0] = 0x2c  ( 44)   ; clip-rect TOP
     [si+0xd2] = 0x149 (329)   ; clip-rect RIGHT
     [si+0xd4] = 0xd8  (216)   ; clip-rect BOTTOM
   The per-frame paint (seg 70:0x9b22) blits the 290×241 bitmap to
   playfield (0x43, 0) = (67, 0), so the bitmap-local clip rect is
   (32, 44, 262, 216) — the cream interior of the parchment, inside the
   blue rule and above the zigzag.  In CSS percentages of the 290×241
   bitmap:
     left   =  32 / 290 = 11.03 %
     top    =  44 / 241 = 18.26 %
     right  = (290 − 262) / 290 =  9.66 %
     bottom = (241 − 216) / 241 = 10.37 %
   The same DIALOG.DI$ chrome backs the feedback popup, article-loading
   transition, and game-over panels — R9 confirmed the binary treats
   them as one widget with two skins, the only diff being BANNER vs
   DIALOG bitmap and the layout rect. */
.mm-reference-prompt {
  position: absolute;
  inset: 0;
  z-index: 65;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-reference-prompt[hidden] { display: none; }

.mm-reference-prompt__dialog {
  position: relative;
  width: 290px;
  max-width: 80%;
  aspect-ratio: 290 / 241;
  background-image: url("data/mindmaze-frames/DIALOG.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;
}

.mm-reference-prompt__text {
  position: absolute;
  left: 11%;
  top: 18.3%;
  right: 9.7%;
  bottom: 42%;
  margin: 0;
  color: #1a1610;
  text-align: center;
  font: 13px/1.3 Georgia, "Times New Roman", serif;
}

.mm-reference-prompt__btns {
  position: absolute;
  left: 11%;
  right: 9.7%;
  bottom: 10.4%;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.mm-reference-prompt__btns button {
  width: 72px;
  padding: 4px 0;
  color: #1c1b14;
  font: 12px/1 "MS Sans Serif", Tahoma, sans-serif;
  background: #c8c4ab;
  border: 1px solid;
  border-color: #f4f1df #6d6758 #6d6758 #f4f1df;
  box-shadow: 1px 1px 0 #1c1b14;
  cursor: pointer;
}

.mm-reference-prompt__btns button:active {
  border-color: #6d6758 #f4f1df #f4f1df #6d6758;
  box-shadow: none;
  transform: translate(1px, 1px);
}

/* MindMaze article-loading transition — DIALOG.DI$ skin (same widget as
   the feedback popup / reference prompt / game-over panel per the
   single seg 70:0x9982 dispatcher).  A short caption fades in over the
   parchment for ~650 ms before the fact box opens. */
.mm-article-loading {
  position: absolute;
  inset: 0;
  z-index: 62;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 650ms ease;
}

.mm-article-loading.is-open {
  opacity: 1;
}

.mm-article-loading[hidden] { display: none; }

.mm-article-loading__sheet {
  position: relative;
  width: 290px;
  max-width: 80%;
  aspect-ratio: 290 / 241;
  background-image: url("data/mindmaze-frames/DIALOG.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;
  /* Drop-shadow keeps the parchment legible against the room backdrop
     while it fades in; mirrors the original game's brief halo before
     the article body lands. */
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.45));
}

.mm-article-loading__caption {
  position: absolute;
  left: 11%;
  top: 18.3%;
  right: 9.7%;
  bottom: 10.4%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #3b3220;
  font: 700 13px/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: 0.5px;
}

/* MindMaze fact box. Round 11 confirmed the chrome is NOT a single
   DI$ — MM95.EXE registers Enc95TPopupClass (same class CFACTBOX.EXE
   wraps) and paints the parchment/green-bar geometry programmatically
   in MFC. CSS therefore stays the approximation, but the palette is
   now sampled from the binary (BANNER/DIALOG parchment + SKY_ADD
   green-arrow buttons + IDB_NEXTPAGE close affordance):
     parchment body  : #ffffde   (BANNER.DI$ centre band, R9)
     button face     : #d9d6c5   (IDB_NEXTPAGE / GREYUP face)
     medieval green  : #52845b   (SKY_ADD arrow body)
     deep green frame: #1f3d2b   (Win95 dark green for title-bar shadow)
     dark brown text : #494339   (IDB_NEXTPAGE outline / button label) */
.mm-fact-box {
  position: absolute;
  inset: 6% 4% 6% 4%;
  z-index: 64;
  display: grid;
  /* R17 — four-row grid: 24px title bar, auto banner, auto tab strip,
     1fr body.  The banner row hosts the 496×47 CFACTDIB cursive
     country-name banner; when no banner is available the row uses
     `.is-empty` to collapse to zero height (see `.mm-fact-box__banner`
     below) so non-country callers fall back to the R15 three-row
     layout unchanged.  Mirrors the binary's Enc95TPopupClass which
     paints the banner above the section tabs whenever a per-country
     fact page is on screen. */
  grid-template-rows: 24px auto auto 1fr;
  background: #ffffde;
  color: #2a2418;
  border: 1px solid;
  border-color: #ebeae1 #494339 #494339 #ebeae1;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
  font: 13px/1.45 Georgia, "Times New Roman", serif;
}
.mm-fact-box[hidden] { display: none; }

.mm-fact-box__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 8px;
  background: linear-gradient(#52845b 0%, #3d6643 100%);
  color: #ffffde;
  font: 700 12px/1 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #1f3d2b;
}

.mm-fact-box__title {
  flex: 1;
  text-align: left;
  text-transform: none;
  text-shadow: 1px 1px 0 #1f3d2b;
}

/* Close affordance approximates the IDB_NEXTPAGE button strip from
   MM95.EXE NE BITMAP resources (72×17, 3-up).  Real game ships a small
   forward-arrow button; the web shell keeps a text "Close" label inside
   the same #d9d6c5 button face so screen readers stay sensible. */
.mm-fact-box__close {
  background: #d9d6c5;
  color: #494339;
  border: 1px solid;
  border-color: #ebeae1 #494339 #494339 #ebeae1;
  font: 700 11px/1 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
  padding: 2px 8px;
}

.mm-fact-box__close:hover {
  background: #ebeae1;
}

.mm-fact-box__close:active {
  border-color: #494339 #ebeae1 #ebeae1 #494339;
}

.mm-fact-box__body {
  padding: 10px 14px 12px;
  overflow-y: scroll;
  font: 13px/1.45 Georgia, "Times New Roman", serif;
  color: #261f12;
  /* `overflow-y: scroll` (instead of auto) guarantees the scrollbar
     reserves a fixed 16px gutter on the right even when the body is
     short — matches the binary's Enc95TPopupClass layout where the
     GREYUP/DOWN buttons sit in their own column. We DO NOT set
     `scrollbar-color` or `scrollbar-width` because Blink prioritizes
     those over the ::-webkit-scrollbar pseudo-elements; the GREYUP/
     DOWN/THUM chrome below would silently get clobbered. Firefox has
     no equivalent pseudo-elements, so it'll show its default thin
     scrollbar — at the cost of platform parity in non-Blink. */
}

.mm-fact-box__body p {
  margin: 0 0 8px;
}

/* R13 Prong B: custom scrollbar chrome on the fact-box body. The
   binary's Enc95TPopupClass scroll buttons are GREYUP/GREYDOWN (4-up
   64×17 strips, cell 16×17 — cell 1 = normal arrow with raised bevel,
   cell 3 = pressed arrow with sunken bevel; cell 0/2 are alt states the
   web shell doesn't surface). The thumb is GREYTHUM (48×14 strip: a
   tan body tile + a dark bevel cell). WebKit's scrollbar pseudo-
   elements only fire in WebKit/Blink browsers, so this is purely
   chrome-enhancement — Firefox uses the scrollbar-color/width rules
   above. */
.mm-fact-box__body::-webkit-scrollbar {
  width: 16px;
  background: #d9d6c5;
}

.mm-fact-box__body::-webkit-scrollbar-track {
  /* Flat parchment-button face that matches the surrounding
     IDB_NEXTPAGE / GREYUP button bevel palette. */
  background: #d9d6c5;
  border: 0;
}

/* `display: block` is needed in modern Blink to make
   ::-webkit-scrollbar-button render at all — the default is
   `display: none`. By default Blink renders four button slots per
   scrollbar (paired at each end). We make the two unused slots
   (:start:increment and :end:decrement) zero-height so the visible
   chrome is a single up arrow at top + a single down arrow at bottom,
   matching the binary's Windows 3.1-era single-button scrollbar. */
.mm-fact-box__body::-webkit-scrollbar-button {
  display: block;
  width: 16px;
  height: 0;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: 64px 17px;
}

.mm-fact-box__body::-webkit-scrollbar-button:vertical:start:decrement {
  height: 17px;
  background-image: url("extracted/ne-resources/mm95-png/MM95.EXE_2_GREYUP.png");
  /* cell 1 = normal raised-bevel up arrow */
  background-position: -16px 0;
}

.mm-fact-box__body::-webkit-scrollbar-button:vertical:start:decrement:active {
  /* cell 3 = pressed sunken-bevel up arrow */
  background-position: -48px 0;
}

.mm-fact-box__body::-webkit-scrollbar-button:vertical:end:increment {
  height: 17px;
  background-image: url("extracted/ne-resources/mm95-png/MM95.EXE_2_GREYDOWN.png");
  /* cell 1 = normal raised-bevel down arrow */
  background-position: -16px 0;
}

.mm-fact-box__body::-webkit-scrollbar-button:vertical:end:increment:active {
  /* cell 3 = pressed sunken-bevel down arrow */
  background-position: -48px 0;
}

/* Suppress the horizontal extra buttons WebKit injects for the
   intersection (we only have a vertical scrollbar). */
.mm-fact-box__body::-webkit-scrollbar-button:horizontal,
.mm-fact-box__body::-webkit-scrollbar-corner {
  display: none;
}

.mm-fact-box__body::-webkit-scrollbar-thumb {
  /* Approximates the binary's thumb chrome: the GREYTHUM strip is a
     14-tall sprite designed to BitBlt onto a variable-height bar, so
     CSS tiles cell 2 (the tan body) and overlays the Win95-style 1px
     bevel border for the raised-edge look. */
  background-color: #a89a83;
  background-image: url("extracted/ne-resources/mm95-png/MM95.EXE_2_GREYTHUM.png");
  background-repeat: repeat-y;
  background-size: 16px 14px;
  background-position: -32px 0;
  border-top: 1px solid #ebeae1;
  border-left: 1px solid #ebeae1;
  border-bottom: 1px solid #494339;
  border-right: 1px solid #494339;
  image-rendering: pixelated;
  min-height: 14px;
}

.mm-fact-box__body::-webkit-scrollbar-thumb:active {
  border-color: #494339 #ebeae1 #ebeae1 #494339;
}

/* R14 — body label rows (definition-list left-column entries). The
   render loop tags short label-shaped lines with `.mm-fact-box__label`
   so the typography distinguishes "Official Name" from
   "República Argentina". Matches the original Encarta fact-box where
   left-column labels are emphasised. */
.mm-fact-box__body p.mm-fact-box__label {
  margin: 8px 0 2px;
  font-weight: 700;
  color: #1f3d2b;
  font-family: "MS Sans Serif", Tahoma, sans-serif;
  font-size: 11px;
  letter-spacing: 0.4px;
}

/* R15 — six-tab section strip (replacing R14's prev/next pager).
   Sits in the auto-height row between the title bar and the body of
   the .mm-fact-box grid. Renders the six CFACTBOX.EXE MENU 0x8069
   BUTTONS children — General / Land / Population / Economy /
   Government / History — as a horizontal row of equal-width Win95-
   bevel buttons.

   Why CSS-only (no sprite)? CFACTBOX.EXE ships ZERO type-5 (DIALOG)
   resources and no tab/button bitmap matching the six-cell shape.
   Enc95TPopupClass paints the row programmatically in MFC: each
   button is a GDI Rectangle + DrawText, drawn with Windows-default
   button bevel using SystemPalette greys. Faithful re-creation =
   Win95 button bevel chrome with the binary-sampled palette
   (parchment #ffffde body, #d9d6c5 button face, #494339 outline /
   text, #52845b active-tab green from SKY_ADD).

   Active tab is sunken (pressed bevel + dark-green border underline);
   inactive tabs are raised (standard Win95 button). Hover lightens
   the inactive tab face by one step toward parchment. */
.mm-fact-box__tabs {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  /* Single bottom border that "merges" with the active tab's bottom
     edge to read as a tab folder. The border is dark-green to match
     the title-bar shadow color. */
  background: #d9d6c5;
  border-top: 1px solid #494339;
  border-bottom: 1px solid #1f3d2b;
  padding: 2px 4px 0;
  gap: 1px;
}

.mm-fact-box__tab {
  /* Equal-width flex; six tabs split the row, with 1px gaps. */
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 4px 3px;
  /* Win95 button-face palette sampled from IDB_NEXTPAGE / GREYUP. */
  background: #d9d6c5;
  color: #494339;
  font: 700 11px/1.15 "MS Sans Serif", Tahoma, sans-serif;
  letter-spacing: 0.2px;
  text-align: center;
  cursor: pointer;
  /* Raised Win95 bevel: light top+left, dark bottom+right. */
  border-width: 1px;
  border-style: solid;
  border-color: #ebeae1 #494339 #494339 #ebeae1;
  /* Bottom margin pulls the inactive tab down 1px so its bottom
     border tucks into the dark-green tabs-strip underline. */
  margin-bottom: -1px;
  /* Truncate long labels with ellipsis (e.g. "Government" on narrow
     viewports). Tabs share width equally; overflowing is preferable
     to wrapping the row. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Keep the focus ring inside the bevel for keyboard nav. */
  outline-offset: -2px;
}

.mm-fact-box__tab:hover:not(.is-active) {
  /* Lighten one step toward parchment so the tab visibly reacts. */
  background: #ebeae1;
}

.mm-fact-box__tab:focus-visible {
  outline: 1px dotted #1f3d2b;
}

.mm-fact-box__tab.is-active {
  /* Sunken/pressed bevel + medieval-green underline (palette
     #52845b sampled from SKY_ADD's arrow body) marks the active
     section, mirroring CFACTBOX.EXE's pressed button look. The
     parchment fill blends into the body row beneath so the active
     tab reads as a continuous folder edge. */
  background: #ffffde;
  color: #1f3d2b;
  border-color: #494339 #ebeae1 #ffffde #494339;
  /* Bring the active tab forward; its bottom merges with the body. */
  position: relative;
  z-index: 1;
  padding-top: 5px;
  padding-bottom: 4px;
  /* Inset top accent strip in medieval green echoes the title bar
     gradient — a small Encarta-fact-box touch. */
  box-shadow: inset 0 2px 0 0 #52845b;
}

/* R17 — country name banner row.  Sits between the titlebar and the
   six-tab strip.  Hosts the 496×47 cursive country-name banner PNG
   (CFACTDIB sub 2 of each country block) as a centered background-
   image; the parchment surround matches the rest of the fact-box body
   so the banner reads as a printed-on-paper title.  When JS toggles
   `.is-empty` (no country / capture-mode fallback), the row collapses
   to zero height and the layout reverts to the R15 three-row grid. */
.mm-fact-box__banner {
  /* The banner art is 496×47 but the fact-box body width on a
     640×480 viewport is ~590px.  Setting the row to the banner's
     intrinsic height keeps the bitmap pixel-perfect when the viewport
     is wide enough, and `background-size: contain` shrinks it
     proportionally on narrower widths.  Cream parchment matches the
     `#ffffde` body fill so the banner painting reads continuous with
     the body even when the bitmap has transparent margins. */
  height: 47px;
  background-color: #ffffde;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border-top: 1px solid #494339;
  /* Pixel-perfect rendering — CFACTDIB ships paletted BMPs; the
     original engine BitBlts at 1:1, so anti-aliased upscale would
     look wrong on high-DPI displays. */
  image-rendering: pixelated;
}

.mm-fact-box__banner.is-empty {
  /* Collapse the row when no banner PNG is available (article-browser
     fact-box, or pre-R17 manifest absent).  Border is removed too so
     the titlebar drop-shadow continues into the tab strip without an
     extra rule. */
  display: none;
}

/* R17 — section illustration rendered at the head of the fact-box
   body.  CFACTDIB's section illustrations are 272×303 (the General-
   info splash variant is 216×192).  We constrain via `max-width` so
   the body text column stays readable on the 640×480 viewport (~30
   chars per line) while the illustration still floats right and the
   body text wraps under.  Background sticks to parchment so any
   transparent-margin illustration blends into the body.

   The figure carries the `figure` semantics for screen readers; the
   `<img>` inside paints the pixel-perfect bitmap (paletted PNG from
   the R16 KWAJ-decompression pipeline). */
.mm-fact-box__illustration {
  float: right;
  margin: 0 0 8px 12px;
  padding: 0;
  /* The 272×303 section illustrations dwarf the body if displayed at
     1:1; cap the width at ~38% of the body for readability. The image
     keeps its aspect ratio via `height: auto`. */
  max-width: 200px;
  /* Subtle parchment border so the bitmap doesn't bleed into the body
     paragraphs; matches the rest of the fact-box bevel palette. */
  background: #ffffde;
  border: 1px solid #494339;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
  image-rendering: pixelated;
}

.mm-fact-box__illustration img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

/* The General-info splash (sub 0 of each country block) is the 216×192
   flag-and-outline image with embedded country name + National Anthem
   button.  Renders larger so the flag remains legible — page 0 is the
   only page that surfaces the splash. */
.mm-fact-box__illustration--splash {
  max-width: 216px;
}

.mm-setup-panel,
.mm-answer-panel {
  display: flex;
  min-width: 0;
  background: #d8d7c4;
  border-top: 1px solid #201c19;
  overflow: hidden;
}

.mm-setup-panel[hidden],
.mm-answer-panel[hidden] { display: none; }

.mm-panel-left {
  width: 175px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 21px 1fr;
  gap: 3px;
  padding: 7px 4px 8px 11px;
  background: #d8d7c4;
}

.mm-map-tools {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 2px;
}

/* Wand cell — the 5-row strip on the left of the question panel. R12
   swaps the previous CSS-drawn wand (two pseudo-elements simulating a
   stick + red-tipped flame) for the real IDB_MATCHES bitmap carved
   from MM95.EXE's NE resource table (R11). The strip is a 4-up 72×21
   sprite (cell 18×21): cell 0 = red-flame "active" wand, cell 1 =
   yellow-flame variant, cell 2 = duller yellow-flame, cell 3 = paired
   wand. Default state uses cell 2 (matches the rendering in the
   reference frame at SteveEncarta95/mindmaze-question-active_0779s).
   The active life slot (slot 0, ready-to-burn) uses cell 0's
   red-flame wand; spent slots fall back to cell 2 dimmed.

   R5's "two attempts then game over" rule maps onto life slots 0,1.
   Slots 2-4 are decorative (matching the binary's 5-row strip even
   though only 2 lives matter for game logic).

   The CSS-drawn beveled "card" (background + border) is kept so the
   wand sits inside its slot bevel — matching the original frames. */
.mm-map-tools span {
  display: block;
  background: #e9e8da;
  border: 1px solid;
  border-color: #fff #8e8b75 #8e8b75 #fff;
  position: relative;
  background-image: url("extracted/ne-resources/mm95-png/MM95.EXE_2_IDB_MATCHES.png");
  background-repeat: no-repeat;
  background-size: 72px 21px;
  background-position: -36px 0;
  image-rendering: pixelated;
}

/* Active life slot — top-of-stack ready wand (red-flame cell 0). The
   `.is-life:first-child` selector hits whichever attempt slot the
   player is on; per R5 only the first two slots are attempts and
   only the topmost is "active". */
.mm-map-tools span.is-life:first-child:not(.is-spent) {
  background-position: 0 0;
}

/* Spent life: drop opacity and desaturate. Keeps cell 2 (the dimmer
   yellow-flame variant) underneath so the silhouette is still
   recognisable. */
.mm-map-tools span.is-spent {
  opacity: 0.32;
  filter: grayscale(0.7);
}

/* Mind Maze feedback overlay — DIALOG.DI$ skin per seg 70:0x9982
   ([bp+0xa] == 0 branch).  The same parchment-with-hanging-cords
   bitmap as the reference prompt; outcome data attribute only tints
   the message text (the binary doesn't recolour the chrome between
   correct/wrong/promotion either — it just changes the inner text). */
.mm-feedback {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font: 12px/1.3 "MS Sans Serif", Tahoma, sans-serif;
}
.mm-feedback[hidden] { display: none; }

.mm-feedback__dialog {
  position: relative;
  width: 290px;
  max-width: 80%;
  aspect-ratio: 290 / 241;
  background-image: url("data/mindmaze-frames/DIALOG.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;
  pointer-events: auto;
}

.mm-feedback__inner {
  position: absolute;
  left: 11%;
  top: 18.3%;
  right: 9.7%;
  bottom: 10.4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 0;
}

.mm-feedback__msg {
  margin: 0;
  text-align: center;
  color: #1a1610;
  font: 13px/1.35 Georgia, "Times New Roman", serif;
}

/* Tint the message text per outcome — the binary doesn't recolour the
   chrome, but a subtle text accent helps the player parse the result
   without re-reading the full sentence. */
.mm-feedback[data-outcome="correct"]   .mm-feedback__msg { color: #1f3d6b; }
.mm-feedback[data-outcome="wrong"]     .mm-feedback__msg { color: #7a2c2c; }
.mm-feedback[data-outcome="promotion"] .mm-feedback__msg { color: #5a3a14; font-weight: 700; }

.mm-feedback button {
  height: 22px;
  width: 60px;
  background: #c8c4ab;
  border: 1px solid;
  border-color: #f4f1df #6d6758 #6d6758 #f4f1df;
  box-shadow: 1px 1px 0 #1c1b14;
  color: #1c1b14;
  font: 12px/1 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}

.mm-feedback button:active {
  border-color: #6d6758 #f4f1df #f4f1df #6d6758;
  box-shadow: none;
  transform: translate(1px, 1px);
}

/* Game-over outcome panel — DIALOG.DI$ skin per the same seg 70:0x9982
   dispatcher.  R8 Prong C added the "Selection Exhausted" outcome
   alongside the standard "won" / "lost" payoffs; the title field still
   distinguishes them. */
.mm-gameover {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font: 13px/1.3 "MS Sans Serif", Tahoma, sans-serif;
  text-align: center;
}
.mm-gameover[hidden] { display: none; }

.mm-gameover__dialog {
  position: relative;
  width: 290px;
  max-width: 80%;
  aspect-ratio: 290 / 241;
  background-image: url("data/mindmaze-frames/DIALOG.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;
  pointer-events: auto;
}

.mm-gameover__inner {
  position: absolute;
  left: 11%;
  top: 18.3%;
  right: 9.7%;
  bottom: 10.4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 0;
}

/* The R8 Prong C "Selection Exhausted" outcome uses a "Start over"
   button, which is wider than the default "OK". Give it room. */
.mm-gameover[data-outcome="exhausted"] button {
  width: 92px;
}

.mm-gameover[data-outcome="won"]       .mm-gameover__title { color: #2c4a2c; }
.mm-gameover[data-outcome="exhausted"] .mm-gameover__title { color: #5a3a14; }

.mm-gameover__title {
  margin: 0 0 4px;
  font: 700 14px/1 Georgia, "Times New Roman", serif;
  letter-spacing: 1px;
  color: #1a1610;
}

.mm-gameover__msg {
  flex: 1;
  margin: 0 0 6px;
  color: #1a1610;
  font: 13px/1.35 Georgia, "Times New Roman", serif;
  display: flex;
  align-items: center;
}

.mm-gameover button {
  width: 70px;
  height: 22px;
  background: #c8c4ab;
  border: 1px solid;
  border-color: #f4f1df #6d6758 #6d6758 #f4f1df;
  box-shadow: 1px 1px 0 #1c1b14;
  color: #1c1b14;
  font: 12px/1 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}

.mm-gameover button:active {
  border-color: #6d6758 #f4f1df #f4f1df #6d6758;
  box-shadow: none;
  transform: translate(1px, 1px);
}

/* Stairs click widget — MM95 seg-70 0x5e3c hotspot + 0xbb1a +2001
   bonus. Sits inside .mindmaze-stage__scene and is only revealed
   between questions (after the feedback popup is dismissed, before
   the next question is picked). The seg-70 prompt string at 0x6e26
   ("Click on the stairs to go up and continue your quest.") is shown
   verbatim as the label. The visual is a simple up-arrow plus the
   verbatim prompt; the underlying click test in the binary is just
   `(x_click == x_hotspot) && (y_click == y_hotspot)` against the
   room object's stairs hotspot. */
.mm-stairs {
  position: absolute;
  /* Bottom-center over the room art, above the feedback layer but
     below the reference prompt / fact box. */
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  z-index: 65;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(28, 32, 64, 0.92);
  color: #fff;
  border: 2px solid #d4a040;
  border-radius: 4px;
  font: 12px/1.2 "MS Sans Serif", Tahoma, sans-serif;
  cursor: pointer;
}
.mm-stairs[hidden] { display: none; }
.mm-stairs:hover { background: rgba(40, 48, 96, 0.96); }
.mm-stairs:focus { outline: 2px solid #fff; outline-offset: 1px; }
.mm-stairs__arrow {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  color: #ffe1a0;
  font-weight: 700;
}

.mm-stairs__label {
  /* The prompt text from seg-70 0x6e26 is fairly long — keep it on
     one line on desktop, wrap on mobile. */
  white-space: nowrap;
}
@media (max-width: 480px) {
  .mm-stairs__label { white-space: normal; }
}

.mm-map-grid {
  position: relative;
  min-width: 0;
  border: 1px solid #9b987f;
  background-color: #d7d5c4;
  background-image:
    linear-gradient(#efeee2 1px, transparent 1px),
    linear-gradient(90deg, #efeee2 1px, transparent 1px);
  background-size: 14px 14px;
  box-shadow: inset 1px 1px 0 #f7f6ec, inset -1px -1px 0 #a29f88;
}

.mm-map-grid::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 13px;
  bottom: 12px;
  height: 34px;
  border-left: 2px solid #9d967b;
  border-bottom: 2px solid #9d967b;
  border-right: 2px solid #9d967b;
  clip-path: polygon(0 60%, 40% 60%, 40% 20%, 73% 20%, 73% 80%, 100% 80%, 100% 100%, 0 100%);
}

.mm-map-grid span {
  position: absolute;
  right: 5px;
  bottom: 16px;
  width: 7px;
  height: 7px;
  background: #8e2040;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #7d1835;
}

.mm-setup-areas {
  flex: 1;
  min-width: 0;
  padding: 8px 9px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mm-setup-areas__label {
  font-size: 13px;
  font-weight: bold;
  color: #000;
}

.mm-area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px 10px;
}

.mm-area-radio {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #8d897b;
  font-size: 12px;
  line-height: 19px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}

.mm-area-radio input[type="radio"] {
  margin: 0;
  flex-shrink: 0;
  accent-color: #8e2040;
  cursor: pointer;
}

.mm-area-radio:has(input:checked) {
  color: #8e2040;
}

.mm-setup-right {
  width: 179px;
  flex-shrink: 0;
  padding: 8px 15px 11px 5px;
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: 18px 76px 1fr 22px;
  gap: 0 14px;
  font-size: 12px;
}

.mm-setup-right__level-label {
  grid-column: 1;
  font-weight: bold;
  font-size: 13px;
  border-bottom: 1px solid #000;
}

.mm-level-buttons {
  grid-column: 1;
  grid-row: 2 / span 3;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 0;
}

.mm-level-btn {
  width: 27px;
  height: 24px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 108px 24px;
  background-position: 0 0;
  font-size: 0;
  cursor: pointer;
  image-rendering: pixelated;
}

.mm-level-btn:hover {
  background-position: -27px 0;
}

.mm-level-btn.is-active {
  background-position: -54px 0;
}

.mm-level-btn--lvl1 {
  background-image: url("extracted/ne-resources/mm95-png/MM95.EXE_2_IDB_DIFFONE.png");
}
.mm-level-btn--lvl2 {
  background-image: url("extracted/ne-resources/mm95-png/MM95.EXE_2_IDB_DIFFTWO.png");
}
.mm-level-btn--lvl3 {
  background-image: url("extracted/ne-resources/mm95-png/MM95.EXE_2_IDB_DIFFTHREE.png");
}
.mm-level-btn--lvl4 {
  background-image: url("extracted/ne-resources/mm95-png/MM95.EXE_2_IDB_DIFFFOUR.png");
}

.mm-setup-player-name {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #6b665c;
  font: 24px/1 Georgia, "Times New Roman", serif;
  padding-top: 2px;
}

.mm-setup-progress {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  align-items: end;
  justify-content: space-between;
  color: #000;
  font: 13px/1 "MS Sans Serif", Tahoma, sans-serif;
}

/* Setup-start OK button — Win95-bevel face with R12 IDB_NEXTPAGE
   arrow decoration. The button transitions setup → question loop,
   so a small forward-arrow is the natural read for IDB_NEXTPAGE
   (72×17 4-up; cell 18×17 each: 0=normal, 1=hover, 2=pressed,
   3=disabled).
   `background-color` is used explicitly (not the `background:`
   shorthand) so the ::after sprite isn't wiped — per the CLAUDE
   memory gotcha on shorthand-clobber. */
.mm-setup-right > button {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: end;
  min-width: 34px;
  padding: 2px 8px;
  color: #000;
  background-color: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  box-shadow: 1px 1px 0 #000;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mm-setup-right > button::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 17px;
  background-image: url("extracted/ne-resources/mm95-png/MM95.EXE_2_IDB_NEXTPAGE.png");
  background-repeat: no-repeat;
  background-size: 72px 17px;
  background-position: 0 0;
  image-rendering: pixelated;
}

.mm-setup-right > button:hover::after {
  background-position: -18px 0;
}

.mm-setup-right > button:active::after {
  background-position: -36px 0;
}

.mm-setup-right > button:disabled::after {
  background-position: -54px 0;
}

.mm-answer-panel .mm-panel-left {
  padding-top: 7px;
}

.mm-answers {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 8px;
}

/* R13 Prong A — each answer row is a flex container holding a choice
   button + a sibling IDB_BOOKS button. Splitting the books out lets it
   stay clickable after the choice goes disabled (HTML's disabled-button
   rules swallow child click events). The visible layout matches the
   pre-R13 inline-span placement. */
.mm-answers .mm-answer-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  flex: 1;
  min-height: 0;
}

.mm-answers .mm-answer-choice {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 8px;
  text-align: left;
  font-size: 12px;
  background: #eeecda;
  border: 1px solid #8e8a73;
  cursor: pointer;
  overflow: hidden;
  min-height: 0;
}

.mm-answers .mm-answer-choice::before {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  background: url("extracted/ne-resources/mm95-png/MM95.EXE_2_IDB_RADIOBUTTONS.png") no-repeat 0 0;
  background-size: 48px 12px;
  image-rendering: pixelated;
}

.mm-answers .mm-answer-choice:hover:not(:disabled)::before {
  background-position: -12px 0;
}

.mm-answers .mm-answer-choice.is-correct::before,
.mm-answers .mm-answer-choice.is-wrong::before {
  background-position: -24px 0;
}

.mm-answers .mm-answer-choice .mm-answer-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-answers .mm-answer-choice:hover:not(:disabled) {
  background: #d8d0b8;
}

.mm-answers .mm-answer-choice.is-correct {
  background: #90d090;
  border-color: #408040;
}

.mm-answers .mm-answer-choice.is-wrong {
  background: #d09090;
  border-color: #804040;
}

.mm-answers .mm-answer-choice:disabled {
  cursor: default;
}

/* Per-answer IDB_BOOKS button — the original mindmaze-question-active
   frames render a tiny book-stack glyph at the far right of every
   answer row (cf. SteveEncarta95 frame 0790s). The strip is a 4-up
   68×18 sprite (cell ≈17×18): cell 0 = normal, cell 1 = hover/yellow
   highlight, cell 2 = pressed/dark, cell 3 = inverted. .has-source is
   set when the answer carries a non-zero article_ref (the binary's
   click target — `1228:c542` is offered on any slot with article_ref >
   0, regardless of correctness). Click fires
   peekMindMazeAnswerReference(answer). */
.mm-answers .mm-answer-books {
  flex: 0 0 17px;
  width: 17px;
  align-self: center;
  height: 18px;
  padding: 0;
  background-color: transparent;
  background-image: url("extracted/ne-resources/mm95-png/MM95.EXE_2_IDB_BOOKS.png");
  background-repeat: no-repeat;
  background-size: 68px 18px;
  background-position: 0 0;
  border: 0;
  image-rendering: pixelated;
  opacity: 0.35;
  cursor: default;
}

.mm-answers .mm-answer-books.has-source {
  opacity: 1;
  cursor: pointer;
}

.mm-answers .mm-answer-books.has-source:hover {
  background-position: -17px 0;
}

.mm-answers .mm-answer-books.has-source:active {
  background-position: -34px 0;
}

.mm-answer-label {
  font-weight: bold;
  flex-shrink: 0;
  width: 16px;
  font-size: 11px;
}

.mm-answer-right {
  width: 136px;
  flex-shrink: 0;
  padding: 8px 14px 11px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.mm-answer-right__name {
  color: #6b665c;
  font: 22px/1 Georgia, "Times New Roman", serif;
  text-align: center;
}

.mm-points-badge {
  width: 90px;
  height: 80px;
  background: url("extracted/ne-resources/mm95-png/MM95.EXE_2_COUNTDN.png") no-repeat center / contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #3a2000;
  font-weight: bold;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.mm-points-badge span {
  font-size: 15px;
  line-height: 1;
  margin-top: 18px;
}

.mm-points-badge small {
  display: none;
}

/* Award badge — augmented with the real DI$ icon in R16. The 6 brackets
   (Pupil → Student → Honor Student → Scholar → Master Scholar Of MindMaze)
   come from MM95 seg-73:0xf02; the AWARD/RIBBON/MEDAL/RING/TROPHY .DI$
   icons live inside MM95BAG.M12 and are now extracted via
   tools/extract_di_assets.py into web/data/mindmaze-assets/MM95BAG/.
   Each icon is 65-66px square; we render at native resolution to the
   left of the text label. The Pupil rank's AWARD.DI$ is intentionally
   a blank grey 66x65 placeholder in the binary, so the icon slot for
   .mm-award--pupil is left empty (the swatch keeps the brown tint
   visible). */
.mm-award-badge {
  width: 180px;
  min-height: 36px;
  padding: 3px 4px 3px 36px;
  font: 9px/1.1 "MS Sans Serif", Tahoma, sans-serif;
  color: #fff;
  background-color: #6c4a1f;
  background-repeat: no-repeat;
  background-position: 2px center;
  background-size: 30px auto;
  border: 1px solid;
  border-color: #b08a4f #3c2c10 #3c2c10 #b08a4f;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
  flex-shrink: 0;
  letter-spacing: 0.02em;
  image-rendering: pixelated;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mm-award-badge.mm-award--pupil          { background-color: #6c4a1f; /* AWARD.DI$ is blank; no icon */ }
.mm-award-badge.mm-award--student        { background-color: #8c4a1f; background-image: url("data/mindmaze-assets/MM95BAG/RIBBON.png"); }
.mm-award-badge.mm-award--honor-student  { background-color: #4a6c1f; background-image: url("data/mindmaze-assets/MM95BAG/MEDAL.png"); }
.mm-award-badge.mm-award--scholar        { background-color: #1f4a6c; background-image: url("data/mindmaze-assets/MM95BAG/RING.png"); }
.mm-award-badge.mm-award--master-scholar { background-color: #6c1f4a; background-image: url("data/mindmaze-assets/MM95BAG/TROPHY.png"); }
.mm-award-badge.mm-award--atrium         { background-color: #6c1f4a; background-image: url("data/mindmaze-assets/MM95BAG/TROPHY.png"); }

.mm-answer-right > button {
  padding: 2px 8px;
  font-size: 11px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  box-shadow: 1px 1px 0 #000;
  cursor: pointer;
  margin-top: auto;
}

.mm-status-strip {
  display: grid;
  grid-template-columns: 1fr 17px;
  align-items: center;
  min-width: 0;
  height: 13px;
  background: #fff;
  color: #000;
  border-top: 1px solid #bcb8a8;
  font: 12px/13px "MS Sans Serif", Tahoma, sans-serif;
  overflow: hidden;
}

.mindmaze-stage[data-mm-phase="login"] .mm-status-strip {
  grid-row: 2;
}

.mm-status-strip span {
  min-width: 0;
  text-align: right;
  padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.mm-status-strip b {
  display: block;
  height: 13px;
  color: #111;
  text-align: center;
  font: 9px/12px sans-serif;
  background: #d6d6ca;
  border-left: 1px solid #8e8a73;
}

.mindmaze-panel {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 8px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  box-shadow: 1px 1px 0 #000;
}

.mindmaze-panel--overview {
  grid-column: 1 / -1;
}

.mindmaze-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--shadow);
}

.mindmaze-panel__header strong {
  font-size: 12px;
}

.mindmaze-panel__header span {
  color: #404040;
  font-size: 10px;
}

.mindmaze-panel h3 {
  margin: 0;
  padding: 2px 4px;
  font-size: 11px;
  color: #fff;
  background: #000080;
}

.mindmaze-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  gap: 5px;
}

.mindmaze-stats dt,
.mindmaze-stats dd {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mindmaze-stats dt {
  padding: 2px 4px;
  background: #808080;
  color: #fff;
  font-size: 10px;
}

.mindmaze-stats dd {
  margin: 0;
  padding: 3px 4px;
  background: #fff;
  border: 1px solid var(--shadow);
  font-weight: 700;
}

.mindmaze-category-grid,
.mindmaze-resource-grid,
.mindmaze-index-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 4px;
}

.mindmaze-category,
.mindmaze-resource,
.mindmaze-index-group {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--shadow);
}

.mindmaze-category strong,
.mindmaze-resource strong,
.mindmaze-index-group strong {
  font-size: 11px;
}

.mindmaze-category span,
.mindmaze-resource span,
.mindmaze-index-group span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #404040;
  font-size: 10px;
}

.mindmaze-question-list {
  min-width: 0;
  max-height: 520px;
  overflow: auto;
  display: grid;
  gap: 8px;
}

.mindmaze-question,
.mindmaze-empty {
  min-width: 0;
  padding: 7px;
  background: #fff;
  border: 1px solid var(--shadow);
}

.mindmaze-question {
  display: grid;
  gap: 6px;
}

.mindmaze-question__title {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #404040;
  font-size: 10px;
}

.mindmaze-question__title strong,
.mindmaze-question__title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mindmaze-question p {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

.mindmaze-answers {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 3px;
  font-size: 10px;
}

.mindmaze-answers li {
  min-width: 0;
}

.mindmaze-answers span {
  overflow-wrap: anywhere;
}

.mindmaze-answers small {
  margin-left: 6px;
  color: #404040;
}

.mindmaze-player {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--shadow);
}

.mindmaze-player__bar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mindmaze-player__bar button {
  min-width: 104px;
  height: 22px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
}

.mindmaze-player__bar button:active {
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.mindmaze-player__bar span {
  min-width: 0;
  color: #404040;
  overflow-wrap: anywhere;
}

.mindmaze-question-player {
  min-width: 0;
}

.mindmaze-play-card {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--shadow);
}

.mindmaze-play-card__title {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.mindmaze-play-card__title span {
  color: #404040;
}

.mindmaze-play-card p {
  margin: 0;
}

.mindmaze-play-answers {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.mindmaze-play-answers button {
  min-width: 0;
  min-height: 28px;
  padding: 4px 6px;
  text-align: left;
  overflow-wrap: anywhere;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
}

.mindmaze-play-answers button.is-correct {
  color: #fff;
  background: #008000;
}

.mindmaze-play-answers button.is-wrong {
  color: #fff;
  background: #800000;
}

.mindmaze-bitmap-grid {
  min-width: 0;
  max-height: 340px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 6px;
}

.mindmaze-decoded-grid {
  min-width: 0;
  max-height: 430px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 6px;
}

.mindmaze-decoded,
.mindmaze-audio {
  min-width: 0;
  margin: 0;
  padding: 6px;
  display: grid;
  gap: 4px;
  align-content: start;
  background: #fff;
  border: 1px solid var(--shadow);
}

.mindmaze-decoded img {
  max-width: 100%;
  max-height: 112px;
  height: auto;
  image-rendering: pixelated;
  justify-self: center;
}

.mindmaze-decoded figcaption,
.mindmaze-audio strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #404040;
  font-size: 10px;
}

.mindmaze-audio audio {
  width: 100%;
  height: 28px;
}

.mindmaze-bitmap {
  min-width: 0;
  margin: 0;
  padding: 6px;
  display: grid;
  gap: 4px;
  align-content: start;
  background: #fff;
  border: 1px solid var(--shadow);
}

.mindmaze-bitmap img {
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  justify-self: center;
}

.mindmaze-bitmap figcaption {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #404040;
  font-size: 10px;
}

.encarta-frame {
  width: min(640px, 100%);
  min-height: 420px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  box-shadow: 1px 1px 0 #000;
}

.encarta-frame__top {
  height: 34px;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto;
  align-items: center;
  gap: 4px;
  padding: 4px 5px;
  background: #000080;
}

.encarta-frame__top img {
  display: block;
  max-height: 24px;
}

.encarta-frame__body {
  display: grid;
  gap: 10px;
  padding: 14px;
  justify-items: center;
}

.encarta-frame__body > img {
  max-width: 100%;
  height: auto;
  background: #000;
}

.encarta-frame__tools {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.encarta-frame__tools img {
  max-height: 72px;
}

.ui-palette {
  min-width: 0;
  align-content: start;
  display: grid;
  gap: 8px;
  padding: 8px;
  overflow: auto;
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.ui-resource-group {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.ui-resource-group h3 {
  margin: 0;
  padding: 2px 4px;
  font-size: 11px;
  background: #000080;
  color: #fff;
}

.ui-resource-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ui-swatch {
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-rows: 58px auto;
  gap: 4px;
  padding: 4px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  cursor: default;
}

.ui-swatch:active {
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.ui-swatch img {
  max-width: 100%;
  max-height: 58px;
  align-self: end;
  justify-self: center;
}

.ui-swatch figcaption {
  overflow-wrap: anywhere;
  text-align: center;
  font-size: 10px;
}

.statusbar {
  border-top: 1px solid var(--light);
  border-bottom: 0;
}

.detail-pane {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(420px, calc(100vw - 36px));
  max-height: min(620px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: 22px minmax(0, 1fr);
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  box-shadow: 1px 1px 0 #000;
  z-index: 10;
}

.detail-pane[hidden] {
  display: none;
}

.detail-pane__titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 3px 2px 6px;
  color: #fff;
  background: linear-gradient(90deg, var(--title), var(--title2));
  font-weight: 700;
}

.detail-pane__titlebar button {
  width: 18px;
  height: 16px;
  padding: 0;
  line-height: 12px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
}

.detail-pane__body {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 8px;
}

.detail-preview {
  min-height: 160px;
}

.detail-preview img,
.detail-preview video {
  max-height: 260px;
}

.detail-meta {
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 2px solid;
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

.detail-text {
  margin: 0;
  padding: 8px;
  white-space: pre-wrap;
  background: #ffffe8;
  border: 1px solid var(--shadow);
}

.detail-actions {
  display: grid;
  gap: 4px;
  padding: 8px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
}

.detail-actions a {
  width: max-content;
  max-width: 100%;
  padding: 2px 8px;
  color: #000;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark-shadow) var(--dark-shadow) var(--light);
  text-decoration: none;
}

.detail-actions span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 10px;
}

.detail-loading {
  padding: 12px;
  background: #fff;
  border: 2px solid;
  border-color: var(--dark-shadow) var(--light) var(--light) var(--dark-shadow);
}

@media (max-width: 760px) {
  .shell {
    width: 100vw;
    height: 100vh;
    margin: 0;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .toolbar {
    overflow-x: auto;
  }

  .toolbar input {
    min-width: 180px;
  }

  .reader-view {
    grid-template-columns: 1fr;
  }

  .reader-index {
    min-height: 180px;
  }

  .shell.reader-mode .reader-view {
    grid-template-columns: 104px 1fr;
    grid-template-rows: 18px 18px 38px 1fr;
  }

  .shell.reader-mode .reader-index {
    min-height: 0;
  }

  .mindmaze-board {
    grid-template-columns: 1fr;
  }

  .mindmaze-panel--overview {
    grid-column: auto;
  }

  .mindmaze-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  body.reader-mode:not(.capture-mode):not(.reader-reference-mode),
  body.mindmaze-mode:not(.capture-mode):not(.mindmaze-reference-mode) {
    width: 640px;
    height: 480px;
    min-height: 480px;
    overflow: hidden;
    padding: 0;
    zoom: calc(100vw / 640px);
  }

  body.home-mode:not(.capture-mode) {
    width: 800px;
    height: 600px;
    min-height: 600px;
    overflow: hidden;
    padding: 0;
    zoom: calc(100vw / 800px);
  }

  body.home-mode:not(.capture-mode) .shell.home-mode,
  body.reader-mode:not(.capture-mode):not(.reader-reference-mode) .shell.reader-mode,
  body.mindmaze-mode:not(.capture-mode):not(.mindmaze-reference-mode) .shell.mindmaze-mode {
    transform: none;
  }

  body.home-mode:not(.capture-mode)::after,
  body.reader-mode:not(.capture-mode):not(.reader-reference-mode)::after,
  body.mindmaze-mode:not(.capture-mode):not(.mindmaze-reference-mode)::after {
    content: none;
  }

  .detail-pane {
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
}

/* =========================================================================
   Language Slate (LANGBAG R1)

   Top-level feature view (8th in the project's feature list) that surfaces
   the 60 LANGBAG.M12 alphabet charts.  Layout mirrors the original
   LANG.EXE "Language Interactivity":

     +-------------------------------------------------------+
     |  [LANGTOP banner | View Phrases  Compare Phrases ]    |
     +--------+----------------------------------------------+
     | sidebar| display name + family                        |
     | filter | +------------------------------------------+ |
     | -------| |                                          | |
     | ALBANIA| |  592x384 alphabet chart                  | |
     | AMENGL | |                                          | |
     |  ...   | +------------------------------------------+ |
     | ZULU   |                                              |
     +--------+----------------------------------------------+

   All colours / borders use the same Win95-bevel palette the rest of the
   app uses (#cdb3b3 / #c0bcaa parchment, #494339 dark trim).
   ========================================================================= */

.language-view {
  width: 100%;
  height: 100%;
  background: #c0bcaa;
  color: #1d1c19;
  font-family: "MS Sans Serif", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid #494339;
  box-sizing: border-box;
  overflow: hidden;
}

/* `[hidden]` precedence — base rule above sets display:flex which
   would otherwise override the HTML hidden attribute, leaving the
   view rendered below the Reader. Same pattern as .nutrition-view
   [hidden] / .reader-view[hidden]. (Bug introduced when Language
   Slate R1 shipped without the precedence rule; fixed here.) */
.language-view[hidden] { display: none; }

.language-view__header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 4px 8px;
  background: linear-gradient(to bottom, #d0cbb6, #b8b29d);
  border-bottom: 1px solid #494339;
  flex: 0 0 40px;
}

.language-view__title-img {
  height: 32px;
  width: auto;
  image-rendering: pixelated;
  display: none; /* Filled in via JS when LANGTOP.png loads. */
}

.language-view__title-fallback {
  font-size: 16px;
  font-weight: bold;
  color: #2c2820;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

.language-view__mode-tabs {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.language-view__mode {
  padding: 4px 14px;
  border: 1px solid #494339;
  border-radius: 2px;
  background: #c9c5b1;
  color: #2c2820;
  font: inherit;
  cursor: pointer;
}

.language-view__mode--active {
  background: #f1ecd5;
  font-weight: bold;
  box-shadow: inset 0 -2px 0 #52845b;
}

.language-view__mode:disabled,
.language-view__mode[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.language-view__body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.language-view__sidebar {
  flex: 0 0 220px;
  background: #b8b29d;
  border-right: 1px solid #494339;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
}

.language-view__search-row {
  padding: 6px;
  border-bottom: 1px solid #898373;
  background: #ada793;
}

.language-view__search-row input {
  width: 100%;
  box-sizing: border-box;
  padding: 3px 6px;
  border: 1px solid #494339;
  background: #f1ecd5;
  font: inherit;
}

.language-view__list {
  flex: 1 1 auto;
  overflow-y: auto;
  background: #d8d2bb;
  list-style: none;
  margin: 0;
  padding: 0;
  /* The LSTRIP decorative strip from the bag lives on the right edge as
     a 32x384 sliver — emulate with a thin border so the sidebar still
     reads as a Encarta-era listbox. */
  border-right: 2px solid #898373;
}

.language-view__list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 3px 10px;
  border: none;
  background: transparent;
  font: inherit;
  color: #1d1c19;
  cursor: pointer;
  border-bottom: 1px dotted #b8b29d;
}

.language-view__list button:hover {
  background: #ece8d1;
}

.language-view__list button.is-active {
  background: #52845b;
  color: #f5f2e1;
  font-weight: bold;
}

.language-view__sidebar-strip {
  display: none; /* LSTRIP placeholder; the listbox border already
                    occupies that pixel column.  Kept as a hook for
                    future image-based decoration. */
}

.language-view__main {
  flex: 1 1 auto;
  background: #c0bcaa;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
}

.language-view__meta {
  margin: 0 0 8px 0;
}

.language-view__display {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  color: #2c2820;
  letter-spacing: 0.02em;
}

.language-view__family {
  margin: 2px 0 0;
  font-size: 12px;
  color: #5c5448;
}

.language-view__chart-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1ecd5;
  border: 1px solid #898373;
  box-shadow: inset 0 0 0 1px #f5f2e1;
  padding: 6px;
  position: relative;
}

.language-view__chart {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.language-view__chart-fallback {
  padding: 32px;
  text-align: center;
  color: #5c5448;
  font-style: italic;
}

.language-view__related {
  margin-top: 12px;
  font-size: 11px;
  color: #5c5448;
}

/* encarta-audio R1 + quick-wins W1 — speaker-hotspot overlay sits on
   top of the 592x384 alphabet chart.  The container is anchored to
   the same flex slot as the chart image (centered in chart-wrap with
   matching width/height) so absolutely-positioned hotspot buttons line
   up with the chart's pre-baked greeting/numeral icons regardless of
   the parent flex container's outer dimensions. */
.language-view__hotspots {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 592px;
  height: 384px;
  max-width: calc(100% - 12px);
  /* Maintain aspect ratio when the chart is scaled down to fit a
     narrow viewport — matches the chart image's own scaling rule
     (max-width: 100%, height: auto). */
  aspect-ratio: 592 / 384;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.language-view__hotspot {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid #2c2820;
  border-radius: 50%;
  background: rgba(241, 236, 213, 0.6);
  color: #2c2820;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  /* Center the hotspot on the (x,y) anchor instead of using the top-left
     corner — keeps hotspots aligned with the chart's pre-baked icons. */
  transform: translate(-50%, -50%);
}

.language-view__hotspot:hover {
  background: #d6cf99;
}

.language-view__hotspot.is-playing {
  background: #494339;
  color: #f5f2e1;
}

.language-view__hotspot::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  display: block;
}

/* encarta-audio R1 — fallback clip tray rendered below the chart
   when `?langAudio=tray` URL flag is set.  Each button surfaces one
   clip slot with its label and stem so the smoke screenshot can
   visibly demonstrate the audio wiring even though sound itself
   isn't capturable. */
.language-view__clip-tray {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: #f1ecd5;
  border: 1px solid #898373;
  font-size: 11px;
}

.language-view__clip-tray-button {
  padding: 3px 8px;
  border: 1px solid #494339;
  border-radius: 2px;
  background: #f5f2e1;
  color: #2c2820;
  font: inherit;
  cursor: pointer;
}

.language-view__clip-tray-button:hover { background: #d6cf99; }
.language-view__clip-tray-button.is-playing { background: #494339; color: #f5f2e1; }

/* Shell wiring for language-mode — matches the mindmaze-mode pattern so
   the feature occupies the full 640x480 viewport.  The original feature
   ran as a standalone Windows application (LANG.EXE), so collapsing the
   archive chrome is faithful behavior: the menubar carries the feature
   title + Close affordance, body fills with the alphabet view. */
.shell.language-mode {
  width: 640px;
  height: 480px;
  margin: 0;
  grid-template-rows: 16px 14px 1fr;
  background: #6e6d63;
  overflow: hidden;
}

/* quick-wins W2 — Harmonize titlebar with Reader/MindMaze.  Default
   .titlebar paints a blue Win95 gradient with "Microsoft Encarta 95"
   that conflicts with the brown "MICROSOFT  ENCARTA" letterspaced bar
   used elsewhere.  Match the mindmaze-mode treatment for consistency
   across all 11 feature views. */
.shell.language-mode .titlebar {
  height: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: #34302d;
  border: 0;
  border-bottom: 1px solid #201c19;
  box-shadow: inset 1px 1px 0 #5a524a;
  color: #bdb5a7;
  padding: 0;
}
.shell.language-mode .titlebar__label {
  color: transparent;
  position: relative;
  text-align: center;
  font: 13px/16px Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}
.shell.language-mode .titlebar__label::after {
  content: "MICROSOFT  ENCARTA";
  position: absolute;
  inset: 0;
  color: #bdb5a7;
  text-shadow: 1px 1px 0 #1b1714;
  white-space: pre;
}
.shell.language-mode .window-controls {
  display: flex;
  gap: 2px;
  padding-right: 4px;
}
.shell.language-mode .window-controls span {
  width: 11px;
  height: 11px;
  border: 1px solid #8f8576;
  background: #423b34;
  box-shadow: inset 1px 1px 0 #c8bda8;
}

.shell.language-mode .toolbar,
.shell.language-mode .sidebar,
.shell.language-mode .content__header,
.shell.language-mode .asset-grid,
.shell.language-mode .loadbar,
.shell.language-mode .home-view,
.shell.language-mode .reader-view,
.shell.language-mode .mindmaze-board,
.shell.language-mode .museum-view,
.shell.language-mode .fractals-view,
.shell.language-mode .nutrition-view,
.shell.language-mode .ui-board,
.shell.language-mode .statusbar {
  display: none;
}

.shell.language-mode .menubar {
  height: 14px;
  position: relative;
  display: block;
  padding: 0;
  background: #c0bcaa;
  border: 0;
  color: #1d1c19;
  font: 10px/14px "MS Sans Serif", Tahoma, sans-serif;
}

.shell.language-mode .menubar button { display: none; }

.shell.language-mode .menubar::before {
  content: "▼  Language Slate";
  position: absolute;
  left: 8px;
  top: 0;
  color: #2c2820;
}

.shell.language-mode .menubar::after {
  content: "| Close";
  position: absolute;
  right: 8px;
  top: 0;
  color: #2c2820;
}

.shell.language-mode .workspace {
  display: block;
  height: 450px;
  padding: 0;
}

.shell.language-mode .content {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
  background: #c0bcaa;
  overflow: hidden;
  padding: 0;
}

.shell.language-mode #language-view {
  display: flex;
  width: 640px;
  height: 450px;
}

body.language-mode { background: #6e6d63; }
body.language-mode .shell { background: transparent; }

@media (max-width: 720px) {
  .language-view__sidebar { flex-basis: 160px; }
  .language-view__display { font-size: 16px; }
}

/* =========================================================================
   World Music (MUSEBAG R1) — mirrors the original WMUSIC.EXE layout.
   The original ran at 640x480 fullscreen with a top header strip + two
   mode tabs (Explore / Game), a hint-banner ribbon, a 592x384 world map
   in the centre with 20 instrument icons positioned on it (Explore mode)
   or in a horizontal tray underneath (Game mode), and a side detail pane
   that pops out the 400x288 exhibit + audio credits when an instrument
   is selected.

     +-----------------------------------------------------------+
     |  WORLD MUSIC               | Explore  Game |              |
     |  [EXPLDIR / GAMEDIR hint banner]                          |
     +-----------------------------------------+-----------------+
     |  +-----------------------------------+  | <detail pane>   |
     |  |  592x384 world map               |  | <400x288 img>   |
     |  |  with instrument icons overlaid  |  | <display name>  |
     |  +-----------------------------------+  | <region>        |
     |  [game-mode status text]                | <ensemble>      |
     |                                          | <credits>      |
     |                                          | [Clue button]  |
     +------------------------------------------+-----------------+

   Palette + bevel rules echo the LANGBAG view above; the MUSPAD halo
   (80x37 green ripple from the bag) is reserved for the R2 drag-over
   feedback.
   ========================================================================= */

.museum-view {
  width: 100%;
  height: 100%;
  background: #e8e4d2;
  color: #1d1c19;
  font-family: "MS Sans Serif", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid #494339;
  box-sizing: border-box;
  overflow: hidden;
}

/* `[hidden]` precedence — same pattern as .nutrition-view[hidden]. */
.museum-view[hidden] { display: none; }

.museum-view__header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 4px 10px;
  background: linear-gradient(to bottom, #d4cdb1, #b9b193);
  border-bottom: 1px solid #494339;
  flex: 0 0 36px;
}

.museum-view__title-fallback {
  font-size: 18px;
  font-weight: bold;
  color: #5c5448;
  font-style: italic;
  letter-spacing: 0.03em;
  flex: 0 0 auto;
}

.museum-view__mode-tabs {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.museum-view__mode {
  padding: 4px 14px;
  border: 1px solid #494339;
  border-radius: 2px;
  background: #c9c5b1;
  color: #2c2820;
  font: inherit;
  cursor: pointer;
}

.museum-view__mode--active {
  background: #f1ecd5;
  font-weight: bold;
  box-shadow: inset 0 -2px 0 #c19a36; /* gold underline accent */
}

.museum-view__directions {
  flex: 0 0 24px;
  padding: 3px 8px;
  background: #c0bcaa;
  border-bottom: 1px solid #898373;
  display: flex;
  align-items: center;
}

.museum-view__directions-img {
  max-height: 18px;
  width: auto;
  image-rendering: pixelated;
}

.museum-view__directions-fallback {
  font-size: 10px;
  color: #2c2820;
  font-style: italic;
}

.museum-view__body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.museum-view__map-wrap {
  /* Inside the 640x450 content area, the map gets ~404x303 and the
     detail pane gets the remaining ~210x303.  The icons scale down to
     match the map (see paintMuseumInstruments() — cell size is
     overridden in JS to track the map's rendered size). */
  flex: 0 0 408px;
  display: flex;
  flex-direction: column;
  background: #efe8c7;
  border-right: 1px solid #898373;
  overflow: hidden;
}

/* Map stage = the world-map image + the overlay tray (Explore mode) +
   the dropped-instrument layer + game status banner.  Game-mode
   surfaces an additional horizontal tray BELOW the stage as a sibling
   inside .museum-view__map-wrap. */
.museum-view__map-stage {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.museum-view__map {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Explore-mode tray — instruments are absolutely positioned over the
   map. Container is layered over .museum-view__map; children stay
   clickable via pointer-events: auto on the buttons themselves. */
.museum-view__tray {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Game-mode horizontal tray sibling — instruments laid out in a row
   under the map (the player picks one and clicks a region; R2 wires up
   the drag).  Stays inside .museum-view__map-wrap so the detail pane
   on the right isn't pushed. */
.museum-view__game-tray {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  padding: 6px;
  border-top: 1px solid #898373;
  background: #d0cbb6;
  overflow: auto;
}

.museum-view__game-tray .museum-view__instrument {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  outline: 1px solid #898373;
  outline-offset: -1px;
  background-color: #efe8c7;
}

/* Instrument buttons — paint a single ICONS-sheet cell as background. */
.museum-view__instrument {
  border: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  cursor: pointer;
  image-rendering: pixelated;
  pointer-events: auto;
  /* width/height/background-position set inline by paintMuseumInstruments() */
}

.museum-view__instrument:hover {
  outline: 2px solid rgba(193, 154, 54, 0.6); /* gold ring */
  z-index: 2;
}

.museum-view__instrument.is-selected {
  outline: 2px solid #c19a36;
  outline-offset: -2px;
  z-index: 3;
}

/* Legacy selector — old .museum-view__tray--game lived inside the map
   stage; the rule above (.museum-view__game-tray .museum-view__instrument)
   replaces it. Kept as a no-op to silence any orphan class hook. */

.museum-view__pad {
  position: absolute;
  width: 80px;
  height: 37px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  display: none; /* surfaced by JS during R2 drag-over */
}

.museum-view__detail {
  flex: 1 1 auto;
  min-width: 0;
  background: #efe8c7;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
}

.museum-view__detail-img {
  width: 100%;
  max-width: 400px;
  height: auto;
  align-self: center;
  image-rendering: pixelated;
  border: 1px solid #898373;
  background: #fff;
}

.museum-view__detail-fallback {
  padding: 28px 8px;
  text-align: center;
  color: #5c5448;
  font-style: italic;
}

.museum-view__detail-display {
  margin: 6px 0 0;
  font-size: 16px;
  color: #2c2820;
  letter-spacing: 0.02em;
}

.museum-view__detail-region {
  margin: 0;
  font-size: 11px;
  color: #5c5448;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.museum-view__detail-ensemble {
  margin: 4px 0 0;
  font-size: 12px;
  color: #2c2820;
}

.museum-view__detail-credits {
  margin: 2px 0 6px;
  font-size: 10px;
  color: #5c5448;
  font-style: italic;
}

.museum-view__clue-button {
  align-self: flex-start;
  padding: 4px 12px;
  border: 1px solid #494339;
  border-radius: 2px;
  background: #f1ecd5;
  color: #2c2820;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

.museum-view__clue-button:hover { background: #f5f2e1; }

/* encarta-audio R1 — Solo / Ensemble play-button row sits between the
   credits text and the Clue button.  Buttons stay hidden until the
   instrument manifest binds an audio src; once visible they look like
   the Clue button so the right-side detail pane keeps its visual
   rhythm.  Each button shows a small speaker glyph in front of its
   label using a pure-CSS triangle (no extra asset). */
.museum-view__audio {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.museum-view__audio-button {
  padding: 4px 10px 4px 22px;
  border: 1px solid #494339;
  border-radius: 2px;
  background: #f1ecd5;
  color: #2c2820;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  position: relative;
}

.museum-view__audio-button::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-left: 8px solid #2c2820;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.museum-view__audio-button:hover { background: #f5f2e1; }

.museum-view__audio-button.is-playing {
  background: #d6cf99;
  box-shadow: inset 0 0 0 1px #898373;
}

.museum-view__audio-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.museum-view__game-status {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  padding: 4px 8px;
  background: rgba(241, 236, 213, 0.92);
  border: 1px solid #494339;
  color: #2c2820;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  pointer-events: none;
}

.museum-view__congrats {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  z-index: 10;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* Shell wiring for museum-mode — matches the language-mode pattern so
   the feature occupies the full 640x480 viewport.  The original WMUSIC
   ran as a standalone Windows application (WMUSIC.EXE), so collapsing
   the archive chrome is faithful behaviour: the menubar carries the
   feature title + Close affordance, the body fills with the museum view. */
.shell.museum-mode {
  width: 640px;
  height: 480px;
  margin: 0;
  grid-template-rows: 16px 14px 1fr;
  background: #6e6d63;
  overflow: hidden;
}

/* quick-wins W2 — Harmonize titlebar with Reader/MindMaze. */
.shell.museum-mode .titlebar {
  height: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: #34302d;
  border: 0;
  border-bottom: 1px solid #201c19;
  box-shadow: inset 1px 1px 0 #5a524a;
  color: #bdb5a7;
  padding: 0;
}
.shell.museum-mode .titlebar__label {
  color: transparent;
  position: relative;
  text-align: center;
  font: 13px/16px Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}
.shell.museum-mode .titlebar__label::after {
  content: "MICROSOFT  ENCARTA";
  position: absolute;
  inset: 0;
  color: #bdb5a7;
  text-shadow: 1px 1px 0 #1b1714;
  white-space: pre;
}
.shell.museum-mode .window-controls {
  display: flex;
  gap: 2px;
  padding-right: 4px;
}
.shell.museum-mode .window-controls span {
  width: 11px;
  height: 11px;
  border: 1px solid #8f8576;
  background: #423b34;
  box-shadow: inset 1px 1px 0 #c8bda8;
}

.shell.museum-mode .toolbar,
.shell.museum-mode .sidebar,
.shell.museum-mode .content__header,
.shell.museum-mode .asset-grid,
.shell.museum-mode .loadbar,
.shell.museum-mode .home-view,
.shell.museum-mode .reader-view,
.shell.museum-mode .mindmaze-board,
.shell.museum-mode .language-view,
.shell.museum-mode .fractals-view,
.shell.museum-mode .nutrition-view,
.shell.museum-mode .ui-board,
.shell.museum-mode .statusbar {
  display: none;
}

.shell.museum-mode .menubar {
  height: 14px;
  position: relative;
  display: block;
  padding: 0;
  background: #c0bcaa;
  border: 0;
  color: #1d1c19;
  font: 10px/14px "MS Sans Serif", Tahoma, sans-serif;
}

.shell.museum-mode .menubar button { display: none; }

.shell.museum-mode .menubar::before {
  content: "\25BC  World Music";
  position: absolute;
  left: 8px;
  top: 0;
  color: #2c2820;
}

.shell.museum-mode .menubar::after {
  content: "| Close";
  position: absolute;
  right: 8px;
  top: 0;
  color: #2c2820;
}

.shell.museum-mode .workspace {
  display: block;
  height: 450px;
  padding: 0;
}

.shell.museum-mode .content {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
  background: #e8e4d2;
  overflow: hidden;
  padding: 0;
}

.shell.museum-mode #museum-view {
  display: flex;
  width: 640px;
  height: 450px;
}

body.museum-mode { background: #6e6d63; }
body.museum-mode .shell { background: transparent; }

/* Reader features-menu tile uses the balalaika icon (ICONS row 0) as
   the recognisable "World Music" thumbnail.  The icon sheet is sliced
   at runtime by paintMuseumInstruments(); here we draw cell (0,0) into
   the tile as a static thumbnail. */
.reader-commandbar .reader-features-menu button.reader-features-menu__tile--museum {
  background-image: url("../web/data/mindmaze-assets/MUSEBAG/ICONS.png");
  background-position: 0 0;
  background-size: 504px 1820px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  background-color: #c9c9c0;
}

/* Only narrow viewports outside the canonical 640x480 capture mode
   downscale the map — the 640x480 smoke captures need the full 592x384
   playing field. */
@media (max-width: 600px) {
  .museum-view__map-wrap { flex-basis: 320px; height: 240px; }
  .museum-view__detail-img { max-width: 240px; }
  .museum-view__detail-display { font-size: 14px; }
}

/* =========================================================================
   Exploring Fractals (TREEBAG R1) — mirrors the original WINTREE.EXE
   layout.  The original ran 640x480 fullscreen with a four-tab lesson
   strip across the top, a banner-strip ribbon (WINTREE.EXE_2_148..157),
   a centre stage that swapped between the 592x384 splash, 359x359
   Mandelbrot zoom frames, 342x342 fern exhibits, or the Tree Generator
   canvas, and a sidebar that carried either the thumbnail strip (10
   Mandelbrot thumbs / 3 fern thumbs) or the Tree Generator controls
   (preset radio buttons + Iteration Level slider).

     +-----------------------------------------------------------+
     |  EXPLORING FRACTALS  | Splash | Nature | Complexity | ... |
     |  [lesson banner / summary copy]                           |
     +-------------------------------------+---------------------+
     |  +-------------------------------+  |  +---------------+  |
     |  |   stage (splash/exhibit/      |  |  | thumb strip   |  |
     |  |   Tree Generator canvas)      |  |  | OR controls   |  |
     |  +-------------------------------+  |  +---------------+  |
     |  caption                            |                     |
     +-------------------------------------+---------------------+

   Palette + bevel rules echo the MUSEBAG view above (deep moss-green
   header on a putty backdrop).  The Tree Generator canvas runs an
   L-system in the web shell driven by the WINTREE.EXE rsrc 5/102
   preset table.
   ========================================================================= */

/* Shell wiring for fractals-mode — matches the museum-mode / language-mode
   pattern so the feature occupies the full 640x480 viewport. WINTREE.EXE
   was a standalone Windows app so collapsing the archive chrome is
   faithful behaviour: menubar carries the feature title + Close
   affordance, the body fills with the fractals view. */
.shell.fractals-mode {
  width: 640px;
  height: 480px;
  margin: 0;
  grid-template-rows: 16px 14px 1fr;
  background: #06092e;
  overflow: hidden;
}

/* quick-wins W2 — Harmonize titlebar with Reader/MindMaze. */
.shell.fractals-mode .titlebar {
  height: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: #34302d;
  border: 0;
  border-bottom: 1px solid #201c19;
  box-shadow: inset 1px 1px 0 #5a524a;
  color: #bdb5a7;
  padding: 0;
}
.shell.fractals-mode .titlebar__label {
  color: transparent;
  position: relative;
  text-align: center;
  font: 13px/16px Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}
.shell.fractals-mode .titlebar__label::after {
  content: "MICROSOFT  ENCARTA";
  position: absolute;
  inset: 0;
  color: #bdb5a7;
  text-shadow: 1px 1px 0 #1b1714;
  white-space: pre;
}
.shell.fractals-mode .window-controls {
  display: flex;
  gap: 2px;
  padding-right: 4px;
}
.shell.fractals-mode .window-controls span {
  width: 11px;
  height: 11px;
  border: 1px solid #8f8576;
  background: #423b34;
  box-shadow: inset 1px 1px 0 #c8bda8;
}

.shell.fractals-mode .toolbar,
.shell.fractals-mode .sidebar,
.shell.fractals-mode .content__header,
.shell.fractals-mode .asset-grid,
.shell.fractals-mode .loadbar,
.shell.fractals-mode .home-view,
.shell.fractals-mode .reader-view,
.shell.fractals-mode .mindmaze-board,
.shell.fractals-mode .language-view,
.shell.fractals-mode .museum-view,
.shell.fractals-mode .nutrition-view,
.shell.fractals-mode .ui-board,
.shell.fractals-mode .statusbar {
  display: none;
}

.shell.fractals-mode .menubar {
  height: 14px;
  position: relative;
  display: block;
  padding: 0;
  background: #c0bcaa;
  border: 0;
  color: #1d1c19;
  font: 10px/14px "MS Sans Serif", Tahoma, sans-serif;
}

.shell.fractals-mode .menubar button { display: none; }

.shell.fractals-mode .menubar::before {
  content: "\25BC  Exploring Fractals";
  position: absolute;
  left: 8px;
  top: 0;
  color: #2c2820;
}

.shell.fractals-mode .menubar::after {
  content: "| Close";
  position: absolute;
  right: 8px;
  top: 0;
  color: #2c2820;
}

.shell.fractals-mode .workspace {
  display: block;
  height: 450px;
  padding: 0;
}

.shell.fractals-mode .content {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
  background: #0a0e36;
  overflow: hidden;
  padding: 0;
}

.shell.fractals-mode #fractals-view {
  display: flex;
  width: 640px;
  height: 450px;
}

body.fractals-mode { background: #06092e; }
body.fractals-mode .shell { background: transparent; }

.fractals-view {
  width: 100%;
  height: 100%;
  background: #0a0e36;  /* deep ink-blue matching the splash backdrop */
  color: #e8e0c8;
  font-family: "MS Sans Serif", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid #1d1c19;
  box-sizing: border-box;
  overflow: hidden;
}

/* `[hidden]` precedence — same pattern as .nutrition-view[hidden]. */
.fractals-view[hidden] { display: none; }

.fractals-view__header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 4px 10px;
  background: linear-gradient(to bottom, #1c2150, #0e1135);
  border-bottom: 1px solid #1d1c19;
  flex: 0 0 36px;
}

.fractals-view__title-fallback {
  font-size: 14px;
  font-weight: bold;
  color: #d4cdb1;
  font-style: italic;
  letter-spacing: 0.03em;
  flex: 0 0 auto;
  white-space: nowrap;
}

.fractals-view__mode-tabs {
  margin-left: auto;
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.fractals-view__mode {
  padding: 3px 6px;
  border: 1px solid #494339;
  border-radius: 2px;
  background: #c9c5b1;
  color: #2c2820;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.fractals-view__mode--active {
  background: #f1ecd5;
  font-weight: bold;
  box-shadow: inset 0 -2px 0 #c19a36;
}

.fractals-view__lesson-summary {
  flex: 0 0 auto;
  padding: 6px 12px;
  background: #1a1e44;
  border-bottom: 1px solid #494339;
  color: #d4cdb1;
  font-style: italic;
  line-height: 1.4;
  min-height: 26px;
}

.fractals-view__body {
  flex: 1;
  display: flex;
  gap: 8px;
  padding: 8px;
  min-height: 0;
}

.fractals-view__stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  background: #06092e;
  border: 1px solid #494339;
  padding: 6px;
  position: relative;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.fractals-view__stage-img {
  max-width: 100%;
  max-height: calc(100% - 22px);
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
  background: #000;
}

.fractals-view__stage-img[hidden] {
  display: none !important;
}

.fractals-view__stage-caption {
  flex: 0 0 auto;
  font-size: 11px;
  color: #d4cdb1;
  text-align: center;
  font-style: italic;
  min-height: 14px;
  padding: 0 8px;
}

.fractals-view__tree-canvas-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fractals-view__tree-canvas {
  background: #fafaf0;
  border: 1px solid #494339;
  image-rendering: auto;
  max-width: 100%;
  max-height: 100%;
}

.fractals-view__sidebar {
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.fractals-view__thumb-strip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding: 4px;
  background: #1a1e44;
  border: 1px solid #494339;
  min-height: 0;
  flex: 1 1 auto;
}

.fractals-view__thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #06092e;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  color: #d4cdb1;
  text-align: center;
}

.fractals-view__thumb:hover {
  border-color: #c19a36;
}

.fractals-view__thumb.is-active {
  border-color: #f1ecd5;
  background: #1c2150;
}

.fractals-view__thumb img {
  max-width: 96px;
  max-height: 96px;
  image-rendering: pixelated;
}

.fractals-view__thumb-label {
  font-size: 10px;
  line-height: 1.1;
}

.fractals-view__tree-controls {
  background: #d4cdb1;
  color: #2c2820;
  border: 1px solid #494339;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}

.fractals-view__tree-controls[hidden],
.fractals-view__tree-canvas-wrap[hidden],
.fractals-view__thumb-strip[hidden] {
  display: none !important;
}

.fractals-view__tree-heading {
  margin: 0 0 4px 0;
  font-size: 12px;
  font-weight: bold;
  color: #1d1c19;
}

.fractals-view__tree-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
}

.fractals-view__tree-row > span {
  font-weight: bold;
}

.fractals-view__tree-select,
.fractals-view__tree-range {
  width: 100%;
  font: inherit;
  font-size: 11px;
}

.fractals-view__tree-out {
  align-self: flex-end;
  font-weight: bold;
}

.fractals-view__tree-redraw {
  padding: 4px 10px;
  border: 1px solid #494339;
  background: #c9c5b1;
  font: inherit;
  cursor: pointer;
}

/* Reader features-menu tile for Exploring Fractals — uses T042089A
   (splash) as the recognisable thumbnail. */
.reader-commandbar .reader-features-menu button.reader-features-menu__tile--fractals {
  background-image: url("../web/data/mindmaze-assets/TREEBAG/t042113a.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  background-color: #06092e;
}

@media (max-width: 600px) {
  .fractals-view__sidebar { flex-basis: 132px; }
  .fractals-view__mode { padding: 4px 6px; font-size: 11px; }
  .fractals-view__title-fallback { font-size: 14px; }
}

/* =========================================================================
   Personal Nutrition (DIETBAG R1) — mirrors the original DIET.EXE layout.
   The original ran at 640x480 fullscreen with a top header strip + three
   instruction-strip mode tabs (ANALINST / CHOOINST / ENTEINST), a body
   that swaps between three panes (Enter Personal Info / Choose Foods /
   Analyze Meals), a Dietary Restrictions sidebar (visible during Choose
   + Analyze), and a Credits footer strip from CREDITS.png.

     +-----------------------------------------------------------+
     |  PERSONAL NUTRITION     [ENTER] [CHOOSE] [ANALYZE]         |
     +-----------------------------------------------------------+
     | <instructions for active mode>                             |
     | +-------------------------------+ +------------------+     |
     | |  active mode pane              | | Restrictions    |     |
     | |  (Enter / Choose / Analyze)    | | sidebar         |     |
     | +-------------------------------+ +------------------+     |
     | [CREDITS strip]                                             |
     +-----------------------------------------------------------+

   The 12 PNGs in DIETBAG.M12 map directly to the chrome bitmaps used
   here: 3 instruction strips (ANALINST/CHOOINST/ENTEINST at 401x59),
   the CREDITS strip, two portion amount bars (AMTS1/AMTS2), and the
   3 tiny add-portion icons (EXTRA/PLUS1/PLUS2). The 3 main exhibit
   pages (T042073A splash, T042117A pyramid, T042118A table) are
   rendered inline in the Enter / Analyze panes respectively. */
.nutrition-view {
  width: 100%;
  height: 100%;
  background: #c0bcaa;
  color: #1d1c19;
  font-family: "MS Sans Serif", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid #494339;
  box-sizing: border-box;
  overflow: hidden;
}

/* Honour the HTML [hidden] attribute even though `.nutrition-view`'s
   own `display: flex` would otherwise win. Same idiom as the language
   + museum views — `hidden` is the JS render's hide path. */
.nutrition-view[hidden] { display: none; }

.nutrition-view__header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: linear-gradient(to bottom, #d0cbb6, #b8b29d);
  border-bottom: 1px solid #494339;
  flex: 0 0 auto;
}

.nutrition-view__title {
  font-size: 13px;
  font-weight: bold;
  color: #2c2820;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
  padding: 0 6px;
}

.nutrition-view__mode-tabs {
  margin-left: auto;
  display: flex;
  gap: 2px;
  align-items: center;
}

.nutrition-view__mode {
  border: 1px solid #494339;
  background: #c9c5b1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 28px;
  overflow: hidden;
  min-width: 0;
  flex: 0 1 auto;
}

/* The bag's 401x59 instruction-strip bitmaps would dominate the 640px
   shell if rendered at native height (36px tall × 3 × ~217 wide =
   651px, wider than the viewport). Hide the strip by default and
   surface the text fallback instead; R2 can flip this once the strip
   bitmap is sliced down to a per-mode word (the strips currently
   include both the mode title and a long subheading). */
.nutrition-view__mode-strip {
  display: none;
}

.nutrition-view__mode-fallback {
  padding: 4px 8px;
  font-size: 10px;
  color: #2c2820;
  white-space: nowrap;
}

.nutrition-view__mode--active {
  background: #f1ecd5;
  box-shadow: inset 0 -2px 0 #52845b;
}

.nutrition-view__mode--active .nutrition-view__mode-fallback {
  font-weight: bold;
}

.nutrition-view__body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.nutrition-view__pane {
  flex: 1 1 auto;
  background: #c0bcaa;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}

/* Same [hidden] precedence pattern as `.nutrition-view[hidden]` — the
   pane's own `display: flex` would otherwise override the implicit
   `[hidden]` => `display: none`. JS toggles the attr by mode. */
.nutrition-view__pane[hidden] { display: none; }

.nutrition-view__pane--enter {
  /* Enter pane is single-column — the personal-info groups stack
     vertically below the instructions. */
}

.nutrition-view__instructions {
  background: #f1ecd5;
  border: 1px solid #898373;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.4;
  color: #2c2820;
  white-space: pre-wrap;
  max-height: 110px;
  overflow: auto;
  flex: 0 0 auto;
}

/* ENTER pane — personal info groups */
.nutrition-view__personal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1 1 auto;
  align-content: start;
}

.nutrition-personal__group {
  background: #d8d2bb;
  border: 1px solid #898373;
  padding: 6px 10px;
  margin: 0;
}

.nutrition-personal__group legend {
  font-weight: bold;
  padding: 0 4px;
  font-size: 11px;
  color: #2c2820;
}

.nutrition-personal__options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 130px;
  overflow: auto;
}

.nutrition-personal__option {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  cursor: pointer;
}

.nutrition-personal__option input { margin: 0; }

.nutrition-personal__actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.nutrition-view__primary {
  background: #52845b;
  color: #f5f2e1;
  font-weight: bold;
  border: 1px solid #2c4a2e;
  padding: 3px 12px;
  cursor: pointer;
}

.nutrition-view__primary:hover {
  background: #5d9165;
}

/* CHOOSE pane — split between catalog (left) and meals (right). The
   restrictions sidebar sits to the right of the choose body in the
   .nutrition-view__body container. */
.nutrition-view__pane--choose {
  flex: 1 1 auto;
}

.nutrition-choose__body {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}

.nutrition-choose__catalog {
  background: #d8d2bb;
  border: 1px solid #898373;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

.nutrition-choose__cat-row {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 0 0 auto;
  font-size: 11px;
}

.nutrition-choose__cat-row select,
.nutrition-choose__cat-row input {
  border: 1px solid #494339;
  background: #f1ecd5;
  font: inherit;
  padding: 1px 4px;
}

.nutrition-choose__cat-row input { flex: 1 1 auto; }

.nutrition-choose__food-list {
  flex: 1 1 auto;
  background: #f1ecd5;
  border: 1px solid #494339;
  overflow-y: auto;
  min-height: 0;
}

.nutrition-choose__food-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  border-bottom: 1px dotted #b8b29d;
}

.nutrition-choose__food-row:hover { background: #ece8d1; }
.nutrition-choose__food-row.is-active { background: #52845b; color: #f5f2e1; }

.nutrition-choose__food-row__portion {
  font-size: 10px;
  color: #5c5448;
  margin-left: 6px;
}

.nutrition-choose__food-row.is-active .nutrition-choose__food-row__portion {
  color: #f1ecd5;
}

.nutrition-choose__actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
  font-size: 11px;
}

.nutrition-choose__portion-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nutrition-choose__portion-row input {
  width: 50px;
  border: 1px solid #494339;
  background: #f1ecd5;
  font: inherit;
  padding: 1px 4px;
}

.nutrition-choose__meals {
  background: #d8d2bb;
  border: 1px solid #898373;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

.nutrition-choose__meals h3 {
  margin: 0;
  font-size: 12px;
  color: #2c2820;
  border-bottom: 1px dotted #898373;
  padding-bottom: 2px;
}

.nutrition-choose__meals-list {
  flex: 1 1 auto;
  background: #f1ecd5;
  border: 1px solid #494339;
  overflow-y: auto;
  font-size: 11px;
  min-height: 80px;
}

.nutrition-choose__meal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 6px;
  border-bottom: 1px dotted #b8b29d;
  cursor: pointer;
}

.nutrition-choose__meal-row:hover { background: #ece8d1; }
.nutrition-choose__meal-row.is-active { background: #52845b; color: #f5f2e1; }

.nutrition-choose__meal-portion {
  font-size: 10px;
  color: #5c5448;
}

.nutrition-choose__meal-row.is-active .nutrition-choose__meal-portion {
  color: #f1ecd5;
}

.nutrition-choose__meals-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nutrition-choose__meals-actions button {
  width: 100%;
  font: inherit;
  padding: 3px 8px;
  border: 1px solid #494339;
  background: #c9c5b1;
  cursor: pointer;
}

.nutrition-choose__meals-actions button:hover { background: #d8d2bb; }
.nutrition-choose__meals-actions .nutrition-view__primary { color: #f5f2e1; }

/* ANALYZE pane — totals table + RDA bar chart. */
.nutrition-view__pane--analyze {
  flex: 1 1 auto;
}

.nutrition-analyze__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}

.nutrition-analyze__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  background: #f1ecd5;
  flex: 1 1 auto;
  overflow: auto;
}

.nutrition-analyze__table thead {
  background: #c9c5b1;
  position: sticky;
  top: 0;
}

.nutrition-analyze__table th,
.nutrition-analyze__table td {
  border: 1px solid #898373;
  padding: 2px 6px;
  text-align: left;
}

.nutrition-analyze__table th { font-size: 11px; color: #2c2820; }

.nutrition-analyze__bar {
  height: 10px;
  background: #d8d2bb;
  border: 1px solid #898373;
  position: relative;
  min-width: 80px;
}

.nutrition-analyze__bar-fill {
  height: 100%;
  background: #52845b;
  width: 0;
}

.nutrition-analyze__bar-fill--over {
  background: #b85c4b;
}

.nutrition-analyze__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 auto;
  font-size: 11px;
}

.nutrition-analyze__footer button {
  border: 1px solid #494339;
  background: #c9c5b1;
  cursor: pointer;
  padding: 3px 10px;
}

.nutrition-analyze__summary {
  color: #5c5448;
  font-style: italic;
}

/* Restrictions sidebar — visible on all panes. */
.nutrition-view__restrictions {
  flex: 0 0 168px;
  background: #b8b29d;
  border-left: 1px solid #494339;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.nutrition-view__restrictions h3 {
  margin: 0;
  font-size: 11px;
  color: #2c2820;
  border-bottom: 1px dotted #898373;
  padding-bottom: 2px;
}

.nutrition-restrictions__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nutrition-restrictions__option {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  cursor: pointer;
  padding: 1px 2px;
}

.nutrition-restrictions__option:hover { background: #c9c5b1; }
.nutrition-restrictions__option input { margin: 0; }

/* Credits footer strip — CREDITS.png from the bag is 195x33, painted
   bottom-left; the fallback text fills if the image fails to load. */
.nutrition-view__footer {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: #c0bcaa;
  border-top: 1px solid #494339;
  font-size: 10px;
  color: #5c5448;
  gap: 8px;
  overflow: hidden;
}

.nutrition-view__credits-strip {
  height: 22px;
  width: auto;
  image-rendering: pixelated;
  display: none; /* JS swaps in on manifest load. */
}

.nutrition-view__credits-fallback {
  font-style: italic;
  font-size: 9px;
}

/* Shell wiring for nutrition-mode — matches the language-mode +
   museum-mode pattern so the feature occupies the full 640x480
   viewport.  DIET.EXE ran as a standalone Windows application; the
   menubar collapses to a title + Close hint, the rest fills with the
   Personal Nutrition shell. */
.shell.nutrition-mode {
  width: 640px;
  height: 480px;
  margin: 0;
  grid-template-rows: 16px 14px 1fr;
  background: #6e6d63;
  overflow: hidden;
}

/* quick-wins W2 — Harmonize titlebar with Reader/MindMaze. */
.shell.nutrition-mode .titlebar {
  height: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: #34302d;
  border: 0;
  border-bottom: 1px solid #201c19;
  box-shadow: inset 1px 1px 0 #5a524a;
  color: #bdb5a7;
  padding: 0;
}
.shell.nutrition-mode .titlebar__label {
  color: transparent;
  position: relative;
  text-align: center;
  font: 13px/16px Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}
.shell.nutrition-mode .titlebar__label::after {
  content: "MICROSOFT  ENCARTA";
  position: absolute;
  inset: 0;
  color: #bdb5a7;
  text-shadow: 1px 1px 0 #1b1714;
  white-space: pre;
}
.shell.nutrition-mode .window-controls {
  display: flex;
  gap: 2px;
  padding-right: 4px;
}
.shell.nutrition-mode .window-controls span {
  width: 11px;
  height: 11px;
  border: 1px solid #8f8576;
  background: #423b34;
  box-shadow: inset 1px 1px 0 #c8bda8;
}

.shell.nutrition-mode .toolbar,
.shell.nutrition-mode .sidebar,
.shell.nutrition-mode .content__header,
.shell.nutrition-mode .asset-grid,
.shell.nutrition-mode .loadbar,
.shell.nutrition-mode .home-view,
.shell.nutrition-mode .reader-view,
.shell.nutrition-mode .mindmaze-board,
.shell.nutrition-mode .language-view,
.shell.nutrition-mode .museum-view,
.shell.nutrition-mode .fractals-view,
.shell.nutrition-mode .ui-board,
.shell.nutrition-mode .statusbar {
  display: none;
}

.shell.nutrition-mode .menubar {
  height: 14px;
  position: relative;
  display: block;
  padding: 0;
  background: #c0bcaa;
  border: 0;
  color: #1d1c19;
  font: 10px/14px "MS Sans Serif", Tahoma, sans-serif;
}

.shell.nutrition-mode .menubar button { display: none; }

.shell.nutrition-mode .menubar::before {
  content: "▼  Personal Nutrition";
  position: absolute;
  left: 8px;
  top: 0;
  color: #2c2820;
}

.shell.nutrition-mode .menubar::after {
  content: "| Close";
  position: absolute;
  right: 8px;
  top: 0;
  color: #2c2820;
}

.shell.nutrition-mode .workspace {
  display: block;
  height: 450px;
  padding: 0;
}

.shell.nutrition-mode .content {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
  background: #c0bcaa;
  overflow: hidden;
  padding: 0;
}

.shell.nutrition-mode #nutrition-view {
  display: flex;
  width: 640px;
  height: 450px;
}

body.nutrition-mode { background: #6e6d63; }
body.nutrition-mode .shell { background: transparent; }

/* Reader features-menu tile uses the CHOOINST strip thumbnail since
   the DIETBAG bag has no single recognisable icon (no per-feature
   icon ships in the 12-PNG carve; the menu's About/Diet icon lives in
   the binary's rsrc 14/2 ICON resource). */
.reader-commandbar .reader-features-menu button.reader-features-menu__tile--nutrition {
  background-image: url("../web/data/mindmaze-assets/DIETBAG/CHOOINST.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  background-color: #c9c9c0;
}

@media (max-width: 600px) {
  .nutrition-choose__body { grid-template-columns: 1fr; }
  .nutrition-view__restrictions { flex-basis: 120px; }
}