/* Cladogram Builder — the Tree of Life Hall at night. Wall control: .ct-* (tree.js); activity panel: .cb-* */
.cb { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 10px; padding: 10px; background: #0b1318; }
.cb-left { min-width: 0; min-height: 0; display: flex; }
.cb-panel { min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #2a1d12, #1c140d); color: #f3e6c4; border: 2px solid #6b4a20; box-shadow: inset 0 0 0 1px rgba(255, 233, 184, .12); }
.cb-card-k { font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #f0c96a; margin-top: 2px; }
.cb-tip { margin: 0; font-size: 16px; line-height: 1.35; color: #e8dbb9; }
.cb-msg { margin: 0; min-height: 0; font-size: 16px; font-weight: 700; color: #ffb4a8; }
.cb-msg:empty { display: none; }
.cb-answer { margin: 0; font-size: 16px; line-height: 1.35; color: #fff3c4; background: rgba(0, 0, 0, .28); border-radius: 8px; padding: 6px 8px; }

/* data tables (rows double as the specimen shelf) */
.cb-table-wrap { border-radius: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 8L8 0' stroke='%23000' stroke-opacity='.06'/%3E%3C/svg%3E"), linear-gradient(#f7f0dc, #ece0bf); color: #2a1d08; padding: 4px 6px 6px; transition: box-shadow .15s; }
.cb-table-wrap.is-target { box-shadow: 0 0 0 3px #f0c96a; }
.cb-table-wrap.is-over { box-shadow: 0 0 0 5px #ffd166; }
.cb-table { border-collapse: collapse; width: 100%; font-size: 16px; }
.cb-table th, .cb-table td { padding: 1px 2px; text-align: center; border-bottom: 1px solid rgba(90, 64, 20, .25); }
.cb-th-name { text-align: left !important; vertical-align: bottom; font-weight: 800; }
.cb-th-trait { vertical-align: bottom; height: auto; width: 27px; padding: 1px 0 !important; }
.cb-th-trait span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 700; font-size: 16px; display: inline-block; }
.cb-dna .cb-th-trait { width: 38px; }
.cb-dna td { width: 38px; }
.cb-table td { font-weight: 800; font-variant-numeric: tabular-nums; width: 27px; padding: 1px 0 !important; }
.cb-table td.is-yes { color: #145a63; background: rgba(29, 95, 107, .12); }
.cb-table td.is-no { color: #9a8a6a; }
.cb-table td.is-blank { background: rgba(90, 64, 20, .07); }
.cb-table td.is-num { color: #2a1d08; }
.cb-dna-note { margin: 2px 0 0; font-size: 16px; color: #5a4520; }
.cb-spec { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 38px; padding: 1px 4px; border-radius: 8px; white-space: nowrap; border: 2px solid transparent; background: transparent;
  color: inherit; font: inherit; font-size: 16px; font-weight: 700; text-align: left; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.cb-spec--static { cursor: default; min-height: 30px; }
.cb-spec--static .cb-mini { display: none; }
button.cb-spec:hover { background: rgba(29, 95, 107, .1); border-color: rgba(29, 95, 107, .4); }
button.cb-spec:focus-visible { outline: 3px solid #1d5f6b; outline-offset: 1px; }
.cb-spec.is-picked { border-color: #c27c0e; background: #ffe8a8; box-shadow: 0 0 0 3px rgba(194, 124, 14, .35); }
.cb-spec.is-placed { opacity: .5; }
.cb-spec { position: relative; }
.cb-spec.is-placed::after { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #145a63; color: #fff; font-size: 13px; line-height: 18px; text-align: center; }
.cb-mini { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 6px; background: radial-gradient(#2f4a5c, #14222d); }

/* choice cards */
.cb-choices { display: grid; gap: 6px; }
.cb-choice { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; border-radius: 10px; border: 2px solid #8a6420; background: linear-gradient(#3a2a1a, #2a1d12);
  color: #f6e7bf; font: inherit; font-size: 16px; font-weight: 700; text-align: left; cursor: pointer; }
.cb-choice:hover { border-color: #f0c96a; }
.cb-choice:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.cb-choice[aria-pressed="true"] { background: linear-gradient(#f6d98b, #d5a845); color: #2a1d08; border-color: #fff3c4; }
.cb-choice.is-answer { box-shadow: 0 0 0 3px #59d18a; }
.cb-choice .cb-mini { width: 52px; height: 52px; flex-basis: 52px; }
.cb-specs--grid, .cb-traits, .cb-pairs { grid-template-columns: 1fr 1fr; }
.cb-specs--grid .cb-mini { width: 40px; height: 40px; flex-basis: 40px; }
.cb-ab { grid-template-columns: 1fr 1fr; }
.cb-ab .cb-choice, .cb-big .cb-choice { justify-content: center; font-size: 18px; }
.cb-big .cb-choice { min-height: 64px; }
.cb-claims .cb-choice { font-weight: 600; line-height: 1.3; }
.cb-legend { margin-top: auto; display: grid; gap: 2px; font-size: 16px; color: #e8dbb9; border-top: 1px solid rgba(240, 201, 106, .35); padding-top: 6px; }
.cb-legend b { color: #f0c96a; }
.cb-key-node, .cb-key-tick { display: inline-block; vertical-align: middle; margin-right: 6px; }
.cb-key-node { width: 12px; height: 12px; border-radius: 50%; background: #f6d98b; border: 2px solid #5a3d10; }
.cb-key-tick { width: 16px; height: 4px; background: #fff3c4; transform: rotate(-45deg); }
.cb-num .pn-pad { grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cb-num .pn-key { min-height: 36px; font-size: 18px; padding: 0; }
.cb-num .pn-key.pn-wide { grid-column: span 1; }
.cb-num .pn-key--neg, .cb-num .pn-key--dot { display: none; }
.cb-num .pn-input { font-size: 24px; padding: 2px 0; }
.cb-num .pn-display { min-height: 0; }
.cb-num .pn-pad { grid-template-columns: repeat(6, 1fr); }
.cb-num .pn-label { font-size: 16px; }
.cb-num .pn-display, .cb-num .pn-readout { min-height: 40px; }
.cb .cb-num { color: var(--tlg-text); background: var(--tlg-surface); border-radius: 10px; padding: 6px; }

/* ---- the wall (tree.js) ---- */
.ct { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 3px solid #4e3416; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); background: #0f1a21; }
.ct-wall { position: relative; flex: 1; min-height: 0; outline: none; }
.ct-wall:focus-visible { box-shadow: inset 0 0 0 3px #4cc9f0; }
.ct-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.ct-branch { stroke: url(#cb-brass); stroke: #c79a3a; stroke-width: 6; stroke-linecap: round; transition: stroke .15s, stroke-width .15s; }
.ct.is-holding .ct-branch { stroke: #e0b75a; stroke-dasharray: 2 10; stroke-width: 7; }
.ct-branch.is-target, .ct.is-holding .ct-branch.is-target { stroke: #ffe066; stroke-width: 11; stroke-dasharray: none; filter: drop-shadow(0 0 6px #ffd166); }
.ct-branch.is-path { stroke: #ffe066; stroke-width: 8; }
.ct-glow { stroke: #fff6cf; stroke-width: 8; stroke-linecap: round; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 7px #ffd166); }
.ct-hit { stroke: transparent; stroke-width: 30; pointer-events: stroke; cursor: pointer; }
.ct-drop { stroke: #c79a3a; stroke-width: 3; stroke-dasharray: 3 4; opacity: .7; }
.ct-node { fill: #f6d98b; stroke: #5a3d10; stroke-width: 2.5; cursor: pointer; transition: r .15s; }
.ct-node.is-selected { fill: #fff; stroke: #4cc9f0; stroke-width: 4; }
.ct-node.is-cursor { stroke: #4cc9f0; stroke-width: 5; }
.ct-node.is-mrca { fill: #ffe066; stroke: #fff; stroke-width: 4; filter: drop-shadow(0 0 8px #ffd166); }
.ct-case { cursor: pointer; }
.ct--build .ct-case { cursor: grab; }
.ct-case-box { fill: url(#cb-velvet); stroke: #c79a3a; stroke-width: 3; }
.ct-case.is-cursor .ct-case-box, .ct-case.is-picked .ct-case-box { stroke: #4cc9f0; stroke-width: 5; }
.ct-case.is-compare .ct-case-box { stroke: #ffe066; stroke-width: 5; }
.ct-case.is-held { opacity: .45; }
.ct-case.is-ok .ct-case-box { stroke: #59d18a; stroke-width: 6; }
.ct-case.is-bad .ct-case-box { stroke: #ff6b5e; stroke-width: 6; }
.ct-name { fill: #f6e7bf; font: 700 17px var(--tlg-font, system-ui, sans-serif); paint-order: stroke; stroke: #0f1a21; stroke-width: 4px; pointer-events: none; }
.ct-title-g rect { fill: rgba(12, 20, 26, .85); stroke: #c79a3a; stroke-width: 2; }
.ct-title { fill: #f0c96a; font: 800 19px var(--tlg-font, system-ui, sans-serif); letter-spacing: .04em; }
.ct-note { fill: #e8dbb9; font: 600 18px var(--tlg-font, system-ui, sans-serif); }
.ct-tick-mark { stroke: #fff3c4; stroke-width: 5; stroke-linecap: round; }
.ct-tick-lead { stroke: #fff3c4; stroke-width: 1.5; opacity: .55; }
.ct-tick-box { fill: rgba(12, 20, 26, .9); stroke: #c79a3a; stroke-width: 1.5; }
.ct-tick-text { fill: #f6e7bf; font: 700 16.5px var(--tlg-font, system-ui, sans-serif); pointer-events: none; }
.ct--build .ct-tick, .ct-tick.is-pickable { cursor: pointer; }
.ct-tick.is-lit .ct-tick-box { fill: #6b4e12; stroke: #ffe066; }
.ct-tick.is-lit .ct-tick-mark { stroke: #ffe066; }
.ct-tick.is-cursor .ct-tick-box, .ct-tick.is-picked .ct-tick-box { stroke: #4cc9f0; stroke-width: 3.5; }
.ct-tick.is-held { opacity: .4; }
.ct-tick.is-ok .ct-tick-box { stroke: #59d18a; stroke-width: 3.5; }
.ct-tick.is-bad .ct-tick-box { stroke: #ff6b5e; stroke-width: 3.5; fill: #4a1712; }
.ct-empty rect { fill: rgba(255, 233, 184, .05); stroke: #c79a3a; stroke-width: 3; stroke-dasharray: 10 8; }
.ct-empty path { stroke: #c79a3a; stroke-width: 6; stroke-linecap: round; opacity: .5; }
.ct-empty text { fill: #f6e7bf; font: 700 18px var(--tlg-font, system-ui, sans-serif); }
.ct-empty.is-target rect { stroke: #ffe066; }
.ct-empty.is-over rect, .ct-empty.is-cursor rect { fill: rgba(255, 224, 102, .16); stroke-width: 5; }
.ct-flip { position: absolute; z-index: 3; min-height: 40px; padding: 4px 12px; border-radius: 999px; border: 2px solid #fff3c4; background: #1d5f6b; color: #fff; font: 700 16px var(--tlg-font, system-ui, sans-serif); cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.ct-flip:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.ct-tray { flex: 0 0 auto; display: flex; gap: 10px; align-items: stretch; padding: 8px 10px; min-height: 104px; border-top: 3px solid #4e3416;
  background: linear-gradient(180deg, #3a2614, #24170c); color: #f3e6c4; transition: box-shadow .15s; }
.ct-tray.is-over { box-shadow: inset 0 0 0 4px #ffd166; }
.ct-tray-k { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #f0c96a; text-align: center; }
.ct-chips { flex: 1; display: flex; flex-wrap: wrap; align-content: center; gap: 6px; min-width: 0; }
.ct-chip { min-height: 40px; padding: 4px 12px; border-radius: 6px; border: 1px solid #6b4a12; background: linear-gradient(#f6d98b, #c79a3a); color: #2a1d08;
  font: 800 16px var(--tlg-font, system-ui, sans-serif); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 2px 0 #5a3d10; }
.ct-chip:focus-visible { outline: 3px solid #4cc9f0; outline-offset: 2px; }
.ct-chip.is-picked { box-shadow: 0 0 0 3px #4cc9f0; transform: translateY(-2px); }
.ct-chip.is-placed { opacity: .35; }
.ct-chip:disabled { cursor: default; }
.ct-bin { flex: 0 0 150px; display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 10px; border: 2px dashed #c99a8a; background: rgba(0, 0, 0, .25); font-size: 16px; line-height: 1.2; cursor: pointer; }
.ct-bin b { color: #ffb4a8; }
.ct-bin.is-over { border-style: solid; border-color: #ffd166; background: rgba(255, 209, 102, .12); }
.ct.is-holding .ct-bin { border-color: #ffd166; }
.ct-bin-chips { display: flex; flex-wrap: wrap; gap: 4px; font-style: normal; }
.ct-bin-chips .ct-chip { opacity: 1; min-height: 36px; }
html .ct-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 10px; background: radial-gradient(#2f4a5c, #14222d); border: 3px solid #ffd166; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
html .ct-ghost svg { width: 100%; height: 100%; }
html .ct-ghost--chip { width: auto; height: auto; padding: 8px 14px; border-radius: 6px; background: linear-gradient(#f6d98b, #c79a3a); color: #2a1d08; font: 800 16px var(--tlg-font, system-ui, sans-serif); border: 2px solid #fff3c4; }
.cb.is-locked .ct-chip, .cb.is-locked .cb-spec { cursor: default; }

.cb-treepick { position: absolute; z-index: 2; left: 12px; min-width: 110px; justify-content: center; font-size: 18px; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.cb-treepick--0 { top: calc(50% - 60px); }
.cb-treepick--1 { bottom: 12px; }

/* Briefing example */
.cb-example { width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 440 / 420; display: flex; }
.cb-example .ct { box-shadow: none; }

/* the assignment card sits at the foot of the customer column (the panel's lower right is the data table) */
@media (min-width: 901px) {
  html.ps-locked:has(.cb) .lga-card { right: auto; left: 12px; }
  html.ps-locked:has(.cb):has(.lga-card) .ps-side { padding-bottom: 84px; }
}
@media (max-width: 900px) {
  .cb { position: static; grid-template-columns: 1fr; min-height: 0; }
  .cb-left { min-height: 520px; }
}
@media (prefers-reduced-motion: reduce) { .ct-branch, .ct-node { transition: none; } }