/* Chromosome Choreographer: the cell stage, the chromosome dock and the other task panels inside the practice shell's stage. */
.cc { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 10px; padding: 10px 12px; }
.cc-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.cc-bar { display: flex; align-items: center; gap: 14px; min-height: 44px; flex-wrap: nowrap; }
.cc-bar--view, .cc-bar--order { justify-content: space-between; }
.cc-cap-inline { font-size: 16px; }
.cc-seg { display: flex; align-items: center; gap: 6px; }
.cc-seg-k { font-size: 16px; font-weight: var(--tlg-weight-bold); white-space: nowrap; }
.cc-seg-g { display: flex; gap: 0; }
.cc-chip { min-height: 42px; padding: 4px 10px; font: inherit; font-size: 16px; font-weight: var(--tlg-weight-bold); line-height: 1.15; cursor: pointer;
  border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); margin-left: -2px; }
.cc-seg-g .cc-chip:first-child { border-radius: var(--tlg-radius-sm) 0 0 var(--tlg-radius-sm); margin-left: 0; }
.cc-seg-g .cc-chip:last-child { border-radius: 0 var(--tlg-radius-sm) var(--tlg-radius-sm) 0; }
.cc-chip[aria-checked="true"] { background: var(--ps-accent); border-color: var(--ps-accent); color: var(--ps-accent-ink, #fff); position: relative; z-index: 1; }
.cc-chip[aria-checked="true"]::before { content: "✓ "; }
.cc-chip:focus-visible, .cc-tg:focus-visible, .cc-mini:focus-visible, .cc-card:focus-visible, .cc-field:focus-visible, .cc-back:focus-visible, .cc-micro-btn:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 2px; position: relative; z-index: 2; }
.cc-chip:disabled, .cc-tg:disabled, .cc-mini:disabled, .cc-card:disabled, .cc-field:disabled { cursor: default; opacity: .75; }
.cc-seg--stack { flex-direction: column; align-items: stretch; gap: 6px; }
.cc-seg--stack .cc-seg-g { flex-direction: column; }
.cc-seg--stack .cc-chip { margin: 0 0 6px; border-radius: var(--tlg-radius-sm) !important; text-align: left; min-height: 46px; }
.cc-seg--dock { flex-wrap: wrap; }
.cc-micro-btn { margin-left: auto; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 10px; font: inherit; font-size: 16px; font-weight: var(--tlg-weight-bold);
  border-radius: var(--tlg-radius-sm); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); cursor: pointer; }
.cc-micro-btn span[aria-hidden] { font-size: 20px; }
.cc-micro-btn[aria-pressed="true"] { background: #f6d3e2; border-color: #8a4d77; color: #3a1530; }
.cc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cc-view { position: relative; flex: 1; min-height: 0; min-width: 0; display: flex; align-items: flex-start; justify-content: center; }
.cc-stagebox { position: relative; border-radius: var(--tlg-radius-lg); overflow: hidden; border: var(--tlg-border-width) solid var(--tlg-border); background: #fdf6ec; user-select: none; -webkit-user-select: none; }
.cc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cc-cap, .cc-note46, .cc-reveal-cap { position: absolute; font-size: 16px; line-height: 1.25; padding: 3px 10px; border-radius: 999px; pointer-events: none; }
.cc-cap { left: 8px; top: 8px; background: rgba(255, 255, 255, .9); color: #1d1424; border: 1px solid rgba(0, 0, 0, .15); }
.cc-note46 { left: 50%; bottom: 10px; transform: translateX(-50%); background: #fff7e0; color: #4a3200; border: 2px solid #c9a227; white-space: nowrap; }
.cc-reveal-cap { left: 50%; top: 8px; transform: translateX(-50%); background: var(--ps-accent); color: #fff; font-weight: 700; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); white-space: nowrap; z-index: 3; }

/* regions over the stage */
.cc-zones { position: absolute; inset: 0; }
.cc-zone { position: absolute; border-radius: 14px; }
.cc-zone--nucleus { left: 31%; top: 22%; width: 38%; height: 56%; border-radius: 50%; }
.cc-zone--plate { left: 45.6%; width: 8.8%; top: 2%; height: 96%; }
.cc-zone--left { left: 1.5%; width: 28.5%; top: 8%; height: 84%; }
.cc-zone--right { left: 70%; width: 28.5%; top: 8%; height: 84%; }
.cc-zone.is-over { background: rgba(122, 46, 107, .12); }
.cc-zsign { position: absolute; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 16px; line-height: 1.1; padding: 2px 8px 2px 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .86); color: #1d1424; border: 1px solid rgba(60, 30, 60, .3); pointer-events: none; }
.cc-zn { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #7a2e6b; color: #fff; font-weight: 800; font-size: 16px; }
.cc-zone--plate .cc-zsign { left: 50%; top: 2px; transform: translateX(-50%); }
.cc-zone--nucleus .cc-zsign { left: 50%; bottom: -2px; transform: translate(-50%, 50%); }
.cc-zone--left .cc-zsign { left: 4px; bottom: 2px; }
.cc-zone--right .cc-zsign { right: 4px; bottom: 2px; }
html.pdz-armed .cc-zone--plate { outline-color: rgba(122, 46, 107, .7); }

/* chromosome tokens */
.cc-pieces { position: absolute; inset: 0; pointer-events: none; }
.cc-tok { all: unset; box-sizing: border-box; position: relative; width: 46px; height: 60px; display: grid; place-items: center; border-radius: 8px; cursor: grab; touch-action: none; }
.cc-pieces .cc-tok { position: absolute; transform: translate(-50%, -50%); width: 6.85%; height: 13.1%; pointer-events: auto; }
.cc-tok:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 2px; }
.cc-tok:hover:not(.is-disabled) { background: rgba(122, 46, 107, .08); }
.cc-tok.is-disabled { cursor: default; }
.cc-tok-art { width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cc-tok-art .cc-loose { display: none; }
.cc-tok-art .cc-ct.is-loose .cc-cond { display: none; }
.cc-tok-art .cc-ct.is-loose .cc-loose { display: inline; }
.cc-tok-lab { position: absolute; right: -8px; top: -6px; min-width: 20px; padding: 0 4px; font-size: 16px; font-weight: 800; line-height: 1.15; text-align: center; border-radius: 6px;
  background: #fff; color: #1d1424; border: 1px solid rgba(0, 0, 0, .25); pointer-events: none; }
.pdz-ghost .cc-tok-lab { right: -8px; }
html .pdz-ghost.cc-tok { display: grid; place-items: center; }

/* the dock */
.cc-dock { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding: 10px; border-radius: var(--tlg-radius-lg); border: var(--tlg-border-width) solid var(--tlg-border); background: var(--tlg-surface); }
.cc-dock-k { margin: 0; font-size: 16px; font-weight: var(--tlg-weight-bold); text-transform: uppercase; letter-spacing: var(--tlg-tracking-caps); color: var(--ps-accent); }
html[data-theme="dark"] .cc-dock-k { color: var(--tlg-text-muted); }
.cc-all { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cc-all-k { font-size: 16px; font-weight: 700; margin-right: 2px; }
.cc-mini { min-height: 40px; padding: 2px 7px; font: inherit; font-size: 16px; border-radius: var(--tlg-radius-sm); border: var(--tlg-border-width) solid var(--tlg-border-strong); background: var(--tlg-surface-2); color: var(--tlg-text); cursor: pointer; }
.cc-rows { display: grid; gap: 6px; }
.cc-row { display: grid; grid-template-columns: 104px 1fr 1fr; gap: 5px; align-items: center; padding: 2px; border-radius: var(--tlg-radius-sm); }
.cc-row.is-placed { background: var(--tlg-surface-2); }
.cc-slots { position: relative; display: flex; gap: 4px; }
.cc-slot { width: 50px; height: 62px; display: grid; place-items: center; border-radius: 8px; border: 2px dashed var(--tlg-border-strong); background: var(--tlg-surface); }
.cc-slot.is-empty { border-style: dotted; opacity: .7; }
.cc-back { position: absolute; left: 0; top: 0; width: 50px; height: 62px; display: grid; place-items: center; align-content: center; padding: 0; font: inherit; font-size: 16px; line-height: 1.1; text-align: center;
  border-radius: 8px; border: 2px solid var(--tlg-border-strong); background: var(--tlg-surface-2); color: var(--tlg-text); cursor: pointer; }
.cc-back[hidden] { display: none; }
.cc-slot--sis + .cc-back, .cc-slots .cc-back { z-index: 1; }
.cc-tg { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 2px 3px; font: inherit; font-size: 16px; font-weight: var(--tlg-weight-bold); line-height: 1.1; min-width: 0;
  border-radius: var(--tlg-radius-sm); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); cursor: pointer; }
.cc-tg-i { font-size: 16px; color: var(--ps-accent); }
html[data-theme="dark"] .cc-tg-i { color: inherit; }
.cc-rows.is-many .cc-slot, .cc-rows.is-many .cc-back { height: 54px; }
.cc-rows.is-many .cc-tok { height: 52px; width: 42px; }
.cc-rows.is-many .cc-tg { min-height: 44px; }
.cc-rows.is-many { gap: 4px; }
.cc-dock-tip { margin: 0; font-size: 16px; line-height: 1.3; }
.cc-dock-tip span { color: var(--tlg-text-muted); }
.cc-msg { margin: 0; min-height: 1.2em; font-size: 16px; font-weight: 700; color: var(--tlg-danger, #b42318); }
html[data-theme="dark"] .cc-msg { color: #ffb4a8; }

/* name cards */
.cc-cards { display: grid; gap: 8px; }
.cc-card { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 4px 12px 4px 6px; font: inherit; font-size: 17px; font-weight: var(--tlg-weight-bold); text-align: left;
  border-radius: var(--tlg-radius-sm); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); cursor: pointer; }
.cc-card-n { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--tlg-surface-2); font-size: 16px; }
.cc-card[aria-checked="true"] { border-color: var(--ps-accent); background: var(--ps-accent); color: var(--ps-accent-ink, #fff); }
.cc-card[aria-checked="true"] .cc-card-n { background: #fff; color: #3a1530; }
.cc-card.is-right { border-color: #2e8b57; box-shadow: 0 0 0 3px #2e8b57; }
.cc-card.is-right::after { content: "✓ right"; margin-left: auto; font-size: 16px; }
.cc-card.is-wrong::after { content: "✗"; margin-left: auto; }

/* counts */
.cc-fields { display: grid; gap: 6px; }
.cc-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 4px 12px; font: inherit; font-size: 16px; font-weight: var(--tlg-weight-bold);
  border-radius: var(--tlg-radius-sm); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); cursor: pointer; }
.cc-field[aria-pressed="true"] { border-color: var(--ps-accent); box-shadow: inset 0 0 0 2px var(--ps-accent); }
.cc-field[aria-pressed="true"] .cc-field-k::before { content: "▸ "; color: var(--ps-accent); }
.cc-field-v { font-size: 24px; font-variant-numeric: tabular-nums; }
.cc-pad .pn { gap: 6px; }
.cc-dock--count .pn-key { min-height: 42px; }
.cc-dock--count .pn-input { font-size: 26px; padding: 2px 0; }
.cc-dock--count .cc-seg { flex-wrap: wrap; }

/* order */
.cc--order { display: flex; flex-direction: column; gap: 10px; }
.cc-oslots { display: flex; align-items: center; justify-content: center; gap: 4px; }
.cc-oslot { position: relative; width: 174px; height: 158px; flex: none; border-radius: 12px; border: 3px dashed var(--tlg-border-strong); background: var(--tlg-surface-2); }
.cc-oslot-n { position: absolute; left: -2px; top: -2px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px 0 10px 0; background: #7a2e6b; color: #fff; font-weight: 800; font-size: 18px; pointer-events: none; }
.cc-oslot-in { position: absolute; inset: 0; display: grid; place-items: center; }
.cc-oarrow { font-size: 22px; color: var(--tlg-text-muted); flex: none; }
.cc-otip { margin: 0; text-align: center; font-size: 16px; }
.cc-otray { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cc-ohome { width: 168px; height: 150px; display: grid; place-items: center; border-radius: 12px; border: 2px dotted var(--tlg-border); }
.cc-ocard { all: unset; box-sizing: border-box; width: 164px; padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 10px; cursor: grab;
  background: var(--tlg-surface); border: 2px solid var(--tlg-border-strong); box-shadow: 0 2px 5px rgba(0, 0, 0, .12); }
.cc-ocard:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 2px; }
.cc-osvg { width: 154px; height: 105px; display: block; border-radius: 6px; background: #fdf6ec; pointer-events: none; }
.cc-ocard-l { font-size: 16px; font-weight: 800; }
.cc-ocard.is-right { border-color: #2e8b57; box-shadow: 0 0 0 3px #2e8b57; }
.cc-ocard.is-right .cc-ocard-l::after { content: " ✓"; }
.cc-ocard.is-wrong { border-color: #c0392b; box-shadow: 0 0 0 3px #c0392b; }
.cc-ocard.is-wrong .cc-ocard-l::after { content: " ✗"; }
.cc-msg--order { text-align: center; }

/* svg scene */
.cc-scene .cc-micro-only { display: none; }
.cc-scene.is-micro .cc-micro-only { display: inline; }
.cc-lab { font: 800 19px/1 var(--tlg-font, system-ui, sans-serif); fill: #1d1424; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.cc-scene.is-faded .cc-chroms, .cc-scene.is-faded .cc-labels { opacity: .4; }
.cc-scene.is-micro .cc-body { fill: #f6d3e2; stroke: #d29ab4; }
.cc-scene.is-micro .cc-wallg rect { fill: #ecc6d6; stroke: #c48aa4; }
.cc-scene.is-micro .cc-orgs { opacity: .3; }
.cc-scene.is-micro .cc-nucfill { fill: #e7c2dd; }
.cc-scene.is-micro .cc-env, .cc-scene.is-micro .cc-env-in { stroke: #8f5f9f; }
.cc-scene.is-micro .cc-aster, .cc-scene.is-micro .cc-polar, .cc-scene.is-micro .cc-kfib { stroke: #b48aa6; opacity: .25; }
.cc-scene.is-micro .cc-cs { opacity: .3; }
.cc-scene.is-micro .cc-arm, .cc-scene.is-micro .cc-arm-o, .cc-scene.is-micro .cc-thread { stroke: #4b2a7a; }
.cc-scene.is-micro .cc-band, .cc-scene.is-micro .cc-kin, .cc-scene.is-micro .cc-marks { display: none; }
.cc-scene.is-micro .cc-cen { fill: #3a1f63; }
.cc-scene.is-micro .cc-nucleolus ellipse { fill: #5b3585; }
.cc-scene.is-micro .cc-plate rect, .cc-scene.is-micro .cc-plate circle { fill: #d8a6c4; stroke: #9a5f82; }
.cc-scene.is-micro .cc-ring ellipse { fill: #a06283; }
.cc-ex { width: 100%; }
.cc-ex-svg { display: block; width: 100%; height: auto; max-height: 460px; aspect-ratio: 760 / 520; }
.ps-brief--drawer .cc-ex-svg { max-height: 300px; }
.cc-start-art { width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) { html .pdz-ghost.is-back { transition: none; } }
@media (max-width: 1100px) { .cc { grid-template-columns: minmax(0, 1fr) 288px; } .cc-seg-k { font-size: 16px; } }
@media (max-width: 900px) {
  .cc, .cc--order { position: static; grid-template-columns: 1fr; display: grid; }
  .cc-bar { flex-wrap: wrap; }
  .cc-view { display: block; }
  .cc-stagebox { width: 100% !important; height: auto !important; aspect-ratio: 760 / 520; }
  .cc-oslots { flex-wrap: wrap; }
  .cc-oarrow { display: none; }
}
.cc-tg[aria-pressed="true"] { border-color: var(--ps-accent); box-shadow: inset 0 0 0 1px var(--ps-accent); }
.cc-back span { display: block; }
.cc-stagebox.is-revealing .cc-cap, .cc-stagebox.is-revealing .cc-zones { display: none; }
/* the shell's customer role caption is 14 px (--tlg-text-sm); 16 px here (board request filed to change it in the shell) */

/* The assignment card would cover the bottom of the dock (bottom-right of the stage): put it at the foot of the customer
   column instead, as Free-Body Garage does. */
@media (min-width: 901px) {
  html.ps-locked:has(.cc) .lga-card { right: auto; left: 12px; }
  html.ps-locked:has(.cc):has(.lga-card) .ps-side { padding-bottom: 84px; }
}