/*
  Gener8 style kit — wall layout for the viewers.

  Shared by every Gener8 viewer. Places the two side panels
  for walls and styles what sits inside them:

  Reach: both side panels are centred on --reach (default 55% down) so they sit at
  chest height on a wall. Nothing is placed in the top band apart from messages.
  Left panel (.parts): headings, layer rows with tick / name / count / Only, and the
  list that opens under a layer. Right panel (.tools): tool buttons, pairs of buttons
  and .box groups that open under their button.
  Touch: large targets, pressed states only, no hover styles.
*/
.stage { position: relative; height: 100%; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---- Side panels: centred on the reach line ----------------------------------- */
.side {
  position: absolute; top: var(--reach); transform: translateY(-50%); z-index: 5;
  max-height: min(86vh, calc(var(--u) * 80)); display: flex; flex-direction: column;
  border-radius: var(--r-lg);
}

/* ---- Parts panel (left) --------------------------------------------------------- */
.parts {
  left: calc(var(--u) * 2); width: calc(var(--u) * 44);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.2) calc(var(--u) * 1.2);
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.parts.closed { transform: translate(calc(-100% - var(--u) * 3), -50%); opacity: 0; pointer-events: none; }
.phead { display: flex; align-items: center; justify-content: space-between; padding: 0 0 calc(var(--u) * 1) calc(var(--u) * .6); }
.parts .seg { margin-bottom: calc(var(--u) * .8); }
.plist { overflow: auto; flex: 1; display: flex; flex-direction: column; padding-right: 2px; overscroll-behavior: contain; }
.pfoot { border-top: 1px solid var(--line); margin-top: calc(var(--u) * .6); padding-top: calc(var(--u) * 1); }

/* Heading over a few layers ("Circulation", "Organs") */
.psec { padding: calc(var(--u) * 1.4) calc(var(--u) * .6) calc(var(--u) * .2); }
.psec:first-child { padding-top: calc(var(--u) * .4); }

/* One layer, and its parts once opened */
.grp { border-radius: var(--r); }
.grp.open { background: var(--well); margin: calc(var(--u) * .3) 0; }
.row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * .2); min-height: calc(var(--u) * 5.4); padding-right: calc(var(--u) * .5); }
.name {
  display: flex; align-items: center; gap: calc(var(--u) * .8); min-height: calc(var(--u) * 5.4);
  padding: 0 calc(var(--u) * .6); text-align: left; font-size: calc(var(--tu) * 1.5); font-weight: 400;
  border-radius: var(--r); min-width: 0;
}
.name:active { background: var(--press); }
.name .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name .num { margin-left: auto; }
.chev { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); color: var(--faint); transition: transform .2s var(--ease); }
.grp.open .chev { transform: rotate(90deg); }

.sub { display: none; flex-direction: column; padding: 0 0 calc(var(--u) * .6) calc(var(--u) * 1.2); }
.grp.open .sub { display: flex; }
.sub .row { min-height: calc(var(--u) * 4.8); }
.sub .tick { width: calc(var(--u) * 4.8); height: calc(var(--u) * 4.8); }
.sub .tick::before, .sub .tick::after { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); }
.sub .name { min-height: calc(var(--u) * 4.6); font-size: calc(var(--tu) * 1.35); font-weight: 400; }
.sub .name.sel { background: var(--accent-soft); color: var(--accent); font-weight: 400; }
.sub .name.off { color: var(--faint); }
/* Small group headings inside a layer (Skull, Spine …) */
.subhead { padding: calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * .2); font-size: calc(var(--tu) * 1.2); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 400; }

/* Tab that reopens the parts panel */
.tab {
  position: absolute; left: 0; top: var(--reach); transform: translateY(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 1.2);
  border-radius: 0 var(--r-lg) var(--r-lg) 0; border-left: 0;
  font-size: calc(var(--tu) * 1.3); font-weight: 400;
}

/* ---- Tools rail (right) --------------------------------------------------------- */
.tools {
  right: calc(var(--u) * 2); width: calc(var(--u) * 24);
  padding: calc(var(--u) * 1.2); gap: calc(var(--u) * .7); overflow: auto; overscroll-behavior: contain;
}
/* Closed with the close button (kit/js/tools-tab.js); the Tools tab opens it again */
.tools { transition: transform .25s var(--ease), opacity .25s var(--ease); overflow-x: hidden; }
.tools.closed { transform: translate(calc(100% + var(--u) * 3), -50%); opacity: 0; pointer-events: none; }
.tools .thead { padding-left: calc(var(--u) * .4); padding-bottom: calc(var(--u) * .4); }
/* Tools tab: the Parts tab mirrored onto the right edge */
.tab.right { left: auto; right: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); border-left: 1px solid var(--panel-line); border-right: 0; }
.tools > .kicker, .box > .kicker { padding: calc(var(--u) * .7) calc(var(--u) * .4) 0; }
/* Two buttons side by side */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .6); }
.pair .btn { padding: 0 calc(var(--u) * .6); gap: calc(var(--u) * .6); }
/* A group of extra controls that opens under its button (Section, Draw, Heart) */
.box {
  display: flex; flex-direction: column; gap: calc(var(--u) * .6);
  padding: calc(var(--u) * .7); border-radius: var(--r);
  border: 1px solid var(--line); background: var(--well);
}
.box small { font-size: calc(var(--tu) * 1.2); color: var(--muted); line-height: 1.35; padding: 0 calc(var(--u) * .3); }
.staff { display: flex; flex-direction: column; gap: calc(var(--u) * .6); }

/* ---- Card: main action row (Open up, Beat, Breathe); empty row collapses ---------- */
.card-main { grid-template-columns: 1fr; }
.card-main:has(> :not([hidden]) ~ :not([hidden])) { grid-template-columns: 1fr 1fr; }
.card-main:not(:has(> :not([hidden]))) { display: none; }