/* Middle three — field-notebook color system and large, explicit controls. */
.post-body .ess-table, .post-body .ess-map, .post-body .ess-eyes {
  --mid-sea: #167b91; --mid-deep: #123d57; --mid-sand: #f3dfaa;
  --mid-coral: #dc6a4a; --mid-moss: #537b65; --mid-paper: #f7f1df;
}
.post-body .ess-table .ess-stage, .post-body .ess-map .ess-stage, .post-body .ess-eyes .ess-stage { margin-top:12px; }
.post-body .ess-table .ess-stage { background: var(--mid-paper); }
.post-body .ess-table .ess-stage::before {
  content: "MENDELEEV'S 1869 ARRANGEMENT · SELECT A QUESTION MARK";
  position: absolute; top: 11px; left: 14px; z-index: 1; color: var(--mid-deep);
  font: 700 10px/1.2 Manrope, sans-serif; letter-spacing: .12em;
}
.post-body .ess-table table { margin-top: 22px; }
.post-body .ess-table td.gap { background: color-mix(in srgb, var(--mid-sand) 48%, transparent); }
.post-body .ess-table td.gap.is-filled { background: var(--mid-moss); color: #fff7e8; border-color: var(--mid-moss); }
.post-body .ess-table .ess-discovery-rail { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:12px 0 0; }
.post-body .ess-table .ess-discovery {
  min-height:48px; padding:7px 8px; border:1px solid var(--ess-rule-hot); background:transparent;
  color:var(--ess-ink); text-align:left; cursor:pointer; font:600 11px/1.15 Manrope,sans-serif;
}
.post-body .ess-table .ess-discovery strong { display:block; color:var(--mid-coral); font:400 16px/1 Fraunces,serif; }
.post-body .ess-table .ess-discovery[aria-pressed="true"] { background:var(--mid-deep); color:#fff7e8; border-color:var(--mid-deep); }
.post-body .ess-table .ess-discovery[aria-pressed="true"] strong { color:var(--mid-sand); }
.post-body .ess-table .ess-discovery:focus-visible, .ess-observation:focus-visible, .ess-lens-point:focus-visible { outline:3px solid var(--mid-coral); outline-offset:2px; }
.post-body .ess-table .ess-note { padding:12px; background:color-mix(in srgb,var(--mid-sand) 24%,transparent); border-left:4px solid var(--mid-coral); }
.post-body .ess-table .ess-note h4 { color:var(--mid-deep); }

.post-body .ess-map .ess-stage { background:#b9e3df; overflow:hidden; }
.post-body .ess-map .ess-map-label { position:absolute; z-index:2; left:14px; top:13px; max-width:235px; color:var(--mid-deep); }
.post-body .ess-map .ess-map-label b { display:block; font:400 22px/1.05 Fraunces,serif; }
.post-body .ess-map .ess-map-label span { display:block; margin-top:4px; font:600 10px/1.25 Manrope,sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.post-body .ess-map .ess-observation { min-height:46px; padding:7px 12px; background:#f7f1df; border:1px solid var(--mid-deep); color:var(--mid-deep); font:600 12px/1.2 Manrope,sans-serif; cursor:pointer; }
.post-body .ess-map .ess-observation[aria-pressed="true"] { background:var(--mid-deep); color:#fff7e8; }
.post-body .ess-map .ess-map-key { margin:10px 0 0; min-height:22px; color:var(--ess-dim); font-size:12px; }
.post-body .ess-map .ess-map-key i { display:inline-block; width:12px; height:12px; margin:0 5px -2px 0; background:var(--mid-coral); border-radius:50%; }
.post-body .ess-map .ess-map-key i.blank { background:#d9edf0; border:1px dashed var(--mid-deep); }
.post-body .ess-map .ess-figs { padding:12px; background:color-mix(in srgb,#b9e3df 32%,transparent); }
.post-body .ess-map .ess-figs .ess-num { color:var(--mid-deep); }

.post-body .ess-eyes .ess-stage { background:#c9e5e0; }
.post-body .ess-eyes .ess-lens-title { position:absolute; top:14px; left:14px; z-index:2; color:#173e52; }
.post-body .ess-eyes .ess-lens-title b { display:block; font:400 22px/1 Fraunces,serif; }
.post-body .ess-eyes .ess-lens-title span { font:600 10px/1.25 Manrope,sans-serif; text-transform:uppercase; letter-spacing:.09em; }
.post-body .ess-eyes .ess-lens-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:11px; }
.post-body .ess-eyes .ess-lens-point { min-height:54px; padding:6px 7px; border:1px solid var(--ess-rule-hot); background:transparent; color:var(--ess-dim); cursor:pointer; text-align:left; font:600 10.5px/1.2 Manrope,sans-serif; }
.post-body .ess-eyes .ess-lens-point[aria-pressed="true"] { background:#173e52; color:#fff7e8; }
.post-body .ess-eyes .ess-lens-point span { display:block; color:var(--mid-coral); font:400 15px/1 Fraunces,serif; margin-bottom:2px; }
.post-body .ess-eyes .ess-legend { margin:10px 0 0; padding:10px 12px; min-height:44px; background:color-mix(in srgb,var(--mid-sand) 45%,transparent); border-left:4px solid var(--mid-coral); }
.post-body .ess-eyes .mark circle { stroke:#e85e45; stroke-width:3; fill:#fff3c4; }
.post-body .ess-eyes .mark.is-selected circle { fill:#e85e45; stroke:#fff7e8; stroke-width:4; }
.post-body .ess-eyes .mark { cursor:pointer; }
@media (max-width:480px) {
  .post-body .ess-table .ess-discovery-rail { grid-template-columns:repeat(2,1fr); }
  .post-body .ess-table .ess-stage { height:470px; }
  .post-body .ess-table .ess-note { min-height:122px; }
  .post-body .ess-map .ess-stage, .post-body .ess-eyes .ess-stage { height:300px; }
  .post-body .ess-eyes .ess-lens-grid { grid-template-columns:repeat(2,1fr); }
  .post-body .ess-eyes .ess-lens-point { min-height:48px; }
}
html[data-mode="dark"] .post-body .ess-table,
html[data-mode="dark"] .post-body .ess-map,
html[data-mode="dark"] .post-body .ess-eyes { --mid-paper:#253a42; }
html[data-mode="dark"] .post-body .ess-table .ess-stage { background:#253a42; }
html[data-mode="dark"] .post-body .ess-table .ess-stage::before { color:#f5db9d; }
html[data-mode="dark"] .post-body .ess-map .ess-observation { background:#203f4d; color:#f7f1df; }