/*
  G8 Anatomy viewer — extras only.

  The look and the wall layout come from the shared Gener8 style kit (/kit/css,
  layout.css places the panels). This file holds what only G8 Anatomy has: drawing
  pens, the two-point cut marker, the ?stats=1 readout, group headings and the Hidden
  list in the Parts panel, the Fade hint and the Lying down views.
*/
.drawing #view { cursor: crosshair; }

/* Drawing pens */
.pens { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * .6); padding: calc(var(--u) * .2); }
.pen { width: 100%; max-width: calc(var(--u) * 4.4); aspect-ratio: 1; border-radius: 50%; justify-self: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.pen[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); }

/* ---- Section cut: dot on the first tap of a two-point cut ---------------------------- */
.cutdot {
  position: absolute; z-index: 5; pointer-events: none;
  width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); margin: calc(var(--u) * -1.1) 0 0 calc(var(--u) * -1.1);
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--panel);
}

/* ---- Pilot readout (?stats=1) ------------------------------------------------------- */
.stats {
  position: absolute; left: 50%; top: calc(var(--u) * 2); transform: translateX(-50%); z-index: 7;
  padding: calc(var(--u) * .8) calc(var(--u) * 1.4); border-radius: var(--r);
  font-family: var(--font-mono); font-size: calc(var(--tu) * 1.2); color: var(--muted); white-space: pre;
}

/* ---- Parts panel: group headings inside a layer (parts-panel.js) ---------------------
   Each group (Skull, Hand, Brain …) is a row with its own tick, count and Only; its
   parts fold out underneath when the name is tapped. */
.sgrp { border-radius: var(--r); }
.sgrp .srow .name { font-weight: 400; }
.ssub { display: none; flex-direction: column; padding-left: calc(var(--u) * 1.2); }
.sgrp.open .ssub { display: flex; }
.sgrp.open > .srow .chev { transform: rotate(90deg); }
/* Some of the group hidden: half-filled tick */
.tick[aria-pressed="mixed"]::before {
  background: linear-gradient(90deg, var(--c) 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px var(--c);
}

/* ---- Parts panel: Hidden list at the top ------------------------------------------------ */
.hidbox { background: var(--well); border-radius: var(--r); margin: 0 0 calc(var(--u) * .6); }
.hidbox .row { grid-template-columns: calc(var(--u) * 5.4) 1fr auto; }
.hid-ico { display: grid; place-items: center; color: var(--muted); }
.hid-ico .i { width: calc(var(--u) * 2); height: calc(var(--u) * 2); }
.hidlist { display: none; flex-direction: column; padding-bottom: calc(var(--u) * .6); max-height: calc(var(--u) * 30); overflow: auto; }
.hidbox.open .hidlist { display: flex; }
.hidbox.open .chev { transform: rotate(90deg); }
.hidlist .row { min-height: calc(var(--u) * 4.8); }
.hidlist .name { min-height: calc(var(--u) * 4.6); font-size: calc(var(--tu) * 1.35); font-weight: 400; }
.hid-sw { justify-self: center; width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); border-radius: 50%; }

/* Fade others: hint under the slider when there is no part to keep solid */
.fade-hint { display: block; color: var(--muted); font-size: calc(var(--tu) * 1.2); padding: calc(var(--u) * .2) calc(var(--u) * .4) 0; }

/* Lying down: the bedside views */
#poseViews { margin-top: calc(var(--u) * .3); }

/* Undo with nothing to undo */
#tUndo:disabled { opacity: .4; }

/* Tools panel: taller than the kit default so Undo, Standing / Lying down and Fade others
   fit without scrolling on a wall */
.side.tools { max-height: min(94vh, calc(var(--u) * 96)); }

/* The Showing bar (js/show-bar.js): centred, a little below the reach line (?reach=), only while something is changed by hand */
.showbar {
  /* On the reach line's level (just below it), not at the foot of the screen: in reach on a wall */
  position: absolute; z-index: 5; left: 50%; top: calc(var(--reach) + var(--u) * 14); transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .7) calc(var(--u) * .8) calc(var(--u) * .7) calc(var(--u) * 1.6);
  border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-line); box-shadow: var(--panel-shadow);
  font-size: calc(var(--tu) * 1.45); color: var(--ink); max-width: 90vw;
}
.showbar .btn { min-height: calc(var(--u) * 5); padding: 0 calc(var(--u) * 1.8); border-radius: 999px; font-size: calc(var(--tu) * 1.4); }
.showbar .sb-what { white-space: nowrap; }
.showbar .sb-gap { width: 1px; align-self: stretch; background: var(--line); }
.showbar .sb-hint { padding-right: calc(var(--u) * .8); color: var(--muted); }
/* Out of the way while a story is being made */
.making-story .showbar { display: none !important; }