:root {
  --bg: #15100e;
  --bg-soft: #221a17;
  --panel: rgba(28, 21, 18, 0.86);
  --panel-line: rgba(255, 233, 214, 0.13);
  --ink: #f3e7dd;
  --ink-dim: #b7a396;
  --ink-faint: #8b7a6e;
  --accent: #e8603c;
  --radius: 14px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

#stage { position: fixed; inset: 0; }
#view { width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- masthead ---------- */

#masthead {
  position: fixed;
  top: 22px;
  left: 26px;
  pointer-events: none;
  z-index: 3;
}

#masthead h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.tagline {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-dim);
}

/* ---------- culture tabs ---------- */

#cultures {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  z-index: 4;
  max-width: calc(100vw - 40px);
  overflow-x: auto;
  scrollbar-width: none;
}
#cultures::-webkit-scrollbar { display: none; }

#cultures button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 13px;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
#cultures button:hover { color: var(--ink); }
#cultures button[aria-current="true"] {
  background: var(--accent);
  color: #fff;
}

/* ---------- panels ---------- */

.panel {
  position: fixed;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  z-index: 3;
}

#legend {
  left: 26px;
  top: 96px;
  bottom: 86px;
  width: 268px;
  display: flex;
  flex-direction: column;
  padding: 14px 4px 10px 16px;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-right: 12px;
}

.panel-head h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
}

#blurb {
  margin: 0 12px 12px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  max-height: 8.2em;
  overflow-y: auto;
  flex: none;
  scrollbar-width: thin;
}

#cut-list {
  list-style: none;
  margin: 0;
  padding: 0 10px 0 0;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 233, 214, 0.2) transparent;
}

#cut-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.25;
  transition: background 0.12s;
}
#cut-list li:hover { background: rgba(255, 233, 214, 0.08); }
#cut-list li[aria-selected="true"] { background: rgba(232, 96, 60, 0.22); }
#cut-list li.absent .cut-native { color: var(--ink-faint); text-decoration: line-through; }
#cut-list li.absent .swatch { opacity: 0.35; }

.swatch {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.cut-names { min-width: 0; }
.cut-native { display: block; }
.cut-en {
  display: block;
  font-size: 11px;
  color: var(--ink-faint);
}

/* ---------- detail ---------- */

#detail {
  right: 26px;
  top: 96px;
  width: 330px;
  max-height: calc(100vh - 182px);
  overflow-y: auto;
  padding: 18px 20px 20px;
  scrollbar-width: thin;
}

#detail-close {
  position: absolute;
  top: 10px;
  right: 12px;
}

.d-native {
  font-family: var(--serif);
  font-size: 25px;
  margin: 0 26px 0 0;
  line-height: 1.15;
}
.d-en { margin: 3px 0 0; font-size: 13px; color: var(--accent); }
.d-romaji { font-size: 12px; color: var(--ink-faint); font-style: italic; }

.d-rule {
  height: 3px;
  border-radius: 2px;
  margin: 13px 0;
}

.d-body { font-size: 13.5px; line-height: 1.55; margin: 0 0 12px; }

.d-label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 14px 0 5px;
}

.d-region { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 233, 214, 0.09);
  border: 1px solid var(--panel-line);
}

.d-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-dim);
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 10px;
  margin: 12px 0 0;
}

.elsewhere { margin: 0; padding: 0; list-style: none; }
.elsewhere li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12.5px;
  padding: 4px 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 233, 214, 0.07);
}
.elsewhere li:hover .el-name { color: var(--accent); }
.el-flag { color: var(--ink-faint); font-size: 10.5px; letter-spacing: 0.06em; width: 26px; flex: none; }
.el-name { flex: 1; }
.el-pct { color: var(--ink-faint); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---------- bottom controls ---------- */

#controls {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  z-index: 4;
  font-size: 12.5px;
}

.slider { display: flex; align-items: center; gap: 10px; color: var(--ink-dim); }
.slider input { width: 130px; accent-color: var(--accent); }
.check { display: flex; align-items: center; gap: 6px; color: var(--ink-dim); cursor: pointer; }
.check input { accent-color: var(--accent); }

.text-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-dim);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
}
.text-btn:hover { color: var(--ink); }

.icon-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-faint);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
}
.icon-btn:hover { color: var(--ink); }

#colophon { position: fixed; right: 26px; bottom: 26px; z-index: 3; }

/* ---------- tooltip, loading, dialog ---------- */

#tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 6;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(12, 8, 7, 0.92);
  border: 1px solid var(--panel-line);
  font-size: 12.5px;
  white-space: nowrap;
  transform: translate(-50%, -140%);
}
#tooltip .tt-en { color: var(--ink-faint); font-size: 11px; margin-left: 6px; }

#loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--ink-dim);
  font-size: 13px;
  background: var(--bg);
  z-index: 8;
  transition: opacity 0.5s;
}
#loading[hidden] { display: none; }
#loading.fading { opacity: 0; pointer-events: none; }
#loading span {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 233, 214, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#about {
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  background: #1b1512;
  color: var(--ink);
  max-width: 620px;
  padding: 24px 28px;
  font-size: 13.5px;
  line-height: 1.6;
}
#about::backdrop { background: rgba(0, 0, 0, 0.6); }
#about h2 { font-family: var(--serif); margin: 0 0 10px; }
#about a { color: var(--accent); }
#about ul { padding-left: 18px; }

/* ---------- collapsed legend / small screens ---------- */

#legend.collapsed { bottom: auto; }
#legend.collapsed #blurb,
#legend.collapsed #cut-list { display: none; }

/* The tab pill is centred on the viewport and is as wide as seven country names
   need -- 584px -- so the gutter left of it is (100vw - 584px)/2, and the masthead
   has to live in that. "Beef Phrasebook" measures 271px at 30px in the serif, so
   the gutter has to reach ~313px to clear it with air, which needs 1220px of
   viewport. Below that no font size rescues it -- at 900px the gutter is 132px,
   which would want a 15px masthead -- so the tabs drop to the bottom rail instead,
   which is the arrangement the small-screen rule below uses anyway. 88px clears
   the controls, which sit at bottom 22px and are taller here than they are small. */
@media (max-width: 1220px) {
  #cultures { top: auto; bottom: 88px; }
}

@media (max-width: 900px) {
  #masthead { top: 14px; left: 16px; }
  #masthead h1 { font-size: 22px; }
  .tagline { display: none; }
  #legend { left: 12px; right: 12px; width: auto; top: 62px; bottom: auto; max-height: 34vh; }
  #detail { left: 12px; right: 12px; width: auto; top: auto; bottom: 120px; max-height: 42vh; }
  #controls { bottom: 16px; gap: 12px; padding: 8px 14px; }
  .slider input { width: 88px; }
  #colophon { display: none; }
}

/* ---------- model switch: the schematic cow, or what it is made of ---------- */

#modes {
  position: fixed;
  top: 20px;
  right: 26px;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  z-index: 4;
}

#modes button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
#modes button:hover { color: var(--ink); }
#modes button[aria-current="true"] { background: var(--accent); color: #fff; }

/* Only one of the two legends and one of the two control sets at a time. */
body[data-mode="cuts"] #part-count,
body[data-mode="cuts"] #part-list,
body[data-mode="cuts"] #anat-controls,
body[data-mode="anatomy"] #legend-title,
body[data-mode="anatomy"] #blurb,
body[data-mode="anatomy"] #cut-list,
body[data-mode="anatomy"] #c-explode { display: none; }

/* ...unless the cut shell is drawn over the anatomy, in which case the cut list is
   the key to what you are looking at and shares the panel with the parts. The parts
   keep the room: there are a hundred and fifteen of them against eight or ten cuts. */
body[data-mode="anatomy"][data-cuts] #legend-title { display: block; }
body[data-mode="anatomy"][data-cuts] #cut-list {
  display: block;
  flex: 0 1 auto;
  max-height: 34%;
  margin-bottom: 12px;
}

#part-count {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
}

#anatomy-loading {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--ink-dim);
}

#part-list {
  list-style: none;
  margin: 0;
  padding: 0 10px 0 0;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 233, 214, 0.2) transparent;
}

#part-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.25;
  transition: background 0.12s;
}
#part-list li:hover { background: rgba(255, 233, 214, 0.08); }
#part-list li[aria-selected="true"] { background: rgba(232, 96, 60, 0.22); }
/* Lit by a cut selected over in the schematic model, not by being picked here. */
#part-list li.lit { background: rgba(232, 96, 60, 0.12); }
#part-list li.lit .cut-native { color: #ffd0bf; }

#part-list li.part-head {
  cursor: default;
  padding: 12px 8px 4px;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
#part-list li.part-head:hover { background: none; }

#anat-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

#anat-controls .layers {
  display: flex;
  gap: 10px;
}

/* The cuts are not a tissue, so they stand apart from the three that are. */
#anat-controls .cuts-layer {
  border-left: 1px solid var(--panel-line);
  padding-left: 10px;
}

#peel { width: 68px; }

#legend.collapsed #part-count,
#legend.collapsed #part-list,
#legend.collapsed #anatomy-loading { display: none; }

.elsewhere.muscles .el-flag {
  min-width: 34px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.elsewhere.muscles .el-pct { font-style: italic; color: var(--ink-faint); }

.see-anatomy { margin: 2px 0 4px; padding: 0; }

@media (max-width: 900px) {
  #modes { top: auto; bottom: 76px; right: 12px; }
  #anat-controls { gap: 8px; flex-wrap: wrap; }
  #anat-controls .layers { gap: 6px; }
}

.d-hint {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faint);
  font-size: 10.5px;
}