/*
  G8 Anatomy — staff labels, the colour key and the staff Mark panel (js/marks/).
  Labels use the kit's label look (kit/css/labels.css); these rules only add what
  differs: their own layer, a coloured edge, and a dot for "more on its card".
*/

/* ---- Staff labels (mark-labels.js) ---------------------------------------------------- */
#markPins { position: absolute; inset: 0; pointer-events: none; z-index: 4; transition: opacity var(--dur) var(--ease); }
#markPins.moving { opacity: 0; }
#markPins .markLines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#markPins .markLines line { stroke: var(--label-line); stroke-width: 1.5; filter: drop-shadow(0 0 1.5px var(--label-bg)); }
/* A staff label: the accent edge tells it apart from the automatic organ labels */
.pin-lab.mark { border-left: calc(var(--u) * .45) solid var(--accent); font-weight: 700; }
/* It has a description: a small "i" says the card has more */
.pin-lab.mark.more::after {
  content: 'i'; display: inline-grid; place-items: center; margin-left: calc(var(--u) * .7);
  width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); border-radius: 50%;
  font-size: calc(var(--tu) * 1.05); font-style: italic; background: var(--accent); color: var(--accent-ink);
}
.pin-dot.mark { background: var(--accent); }

/* ---- Colour key (colour-key.js): foot of the free strip, on the left --------------------- */
.colour-key {
  /* Above the Gener8 mark in the corner (kit/css/brand.css), never over it */
  position: absolute; z-index: 5; bottom: calc(var(--mark-gap, 16px) * 2 + var(--mark-height, 64px));
  display: flex; flex-direction: column; min-width: calc(var(--u) * 16);
  padding: calc(var(--u) * .5); border-radius: var(--r);
}
.colour-key.off { display: none !important; }
.ck-head {
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1);
  min-height: calc(var(--u) * 4.4); padding: 0 calc(var(--u) * .8);
  font-size: calc(var(--tu) * 1.25); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.ck-head .i { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); }
.ck-list { display: flex; flex-direction: column; max-height: calc(var(--u) * 34); overflow: auto; }
/* Rows big enough to tap on a wall */
.ck-row {
  display: grid; grid-template-columns: calc(var(--u) * 2.2) 1fr; align-items: center; gap: calc(var(--u) * .9);
  min-height: calc(var(--u) * 4.4); padding: 0 calc(var(--u) * .8); border-radius: var(--r-sm);
  font-size: calc(var(--tu) * 1.35); text-align: left; color: var(--ink);
}
.ck-row:active { background: var(--well); }
.ck-row i { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border-radius: calc(var(--u) * .5); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.ck-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Mark panel (mark-tool.js) ------------------------------------------------------------ */
.marking-brush #view { cursor: crosshair; }
.mark-hint { display: block; padding: calc(var(--u) * .3) calc(var(--u) * .4) 0; }
.mark-empty { display: block; padding: calc(var(--u) * .4); }
.mark-areas { display: flex; flex-direction: column; gap: calc(var(--u) * .3); max-height: calc(var(--u) * 22); overflow: auto; }
.mark-area { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(var(--u) * .4); border-radius: var(--r); }
.mark-area[aria-current="true"] { background: var(--well); box-shadow: inset 0 0 0 1.5px var(--ink); }
.mark-pick {
  display: grid; grid-template-columns: calc(var(--u) * 2.4) 1fr; align-items: center; gap: calc(var(--u) * .8);
  min-height: calc(var(--u) * 4.6); padding: 0 calc(var(--u) * .7); text-align: left;
  font-size: calc(var(--tu) * 1.35); color: var(--ink);
}
.mark-pick i { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.mark-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark-pick em { color: var(--muted); font-style: normal; }
.mark-area .btn.small { min-height: calc(var(--u) * 4); margin-right: calc(var(--u) * .3); }
/* Five swatches a row; dimmed until there is a colour to change */
.mark-colours { grid-template-columns: repeat(5, 1fr); }
.mark-colours.off { opacity: .6; }
#markUndo:disabled { opacity: .4; }