/* THE ARTICULATED VIEWER'S STYLES (web/asset_viewer.js, web/outliner.js): moved out of
 * web/style.css 2026-09-28 so a page without Plumb's stylesheet - Mayfly's store,
 * web/mayfly/store.html - draws the same viewer. Plumb's index.html links it after
 * style.css; the viewer still reads Plumb's tokens with fallbacks (--color-inset ...). */
/* --- the articulated viewer (web/asset_viewer.js): outliner | stage | parameters ------ */
.av { display: grid; grid-template-columns: 320px 1fr 240px; gap: 0; width: 100%; height: 100%; min-height: 420px; background: var(--color-neutral-300); border-radius: 10px; overflow: hidden; }
.av-left { display: flex; flex-direction: column; min-height: 0; background: var(--color-inset, #191a17); }
.av-outliner, .av-params, .av-inspector { background: var(--color-inset, #191a17); color: var(--color-fg, #ddd); padding: 10px 10px 14px 10px; overflow: auto; font-size: 13px; }
.av-outliner { flex: 1 1 auto; min-height: 0; }
.av-inspector { flex: 0 0 auto; max-height: 32%; border-top: 1px solid rgba(255,255,255,.08); }
.av-slot { font-size: 12px; font-weight: 600; margin: 6px 0 2px 0; }
.av-stack { list-style: none; margin: 0 0 6px 0; padding: 0; }
.av-stack-row { font-size: 11px; opacity: .85; padding: 2px 0 2px 8px; border-left: 2px solid rgba(211,160,63,.5); margin: 2px 0; }
.av-stage { position: relative; min-width: 0; min-height: 320px; }
.av-stage canvas { display: block; width: 100% !important; height: 100% !important; }
.av-note { position: absolute; left: 12px; top: 12px; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #eee; font-size: 12px; }
.av-bar { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.av-pane-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin: 4px 0 8px 0; }
.av-tree { list-style: none; margin: 0; padding: 0; }
/* THE OUTLINER (web/outliner.js): a Maya-style tree - a kind icon, the node's clean name in
   mono, its facts on a second muted line; indent guides per level; the picked row in the
   accent. Kinds: asset group link geo decal joint fixed locator material light camera set */
.ol-tree, .ol-kids { list-style: none; margin: 0; padding: 0; }
.ol-kids { margin-left: 7px; padding-left: 5px; border-left: 1px solid rgba(255,255,255,.09); }
.ol-row { margin: 1px 0; }
.ol-line { display: flex; align-items: center; gap: 6px; min-height: 22px; padding: 1px 6px 1px 2px; border-radius: 6px; }
.ol-pickable > .ol-line { cursor: pointer; }
.ol-pickable > .ol-line:hover { background: rgba(255,255,255,.06); }
.ol-picked > .ol-line { background: rgba(211,160,63,.20); box-shadow: inset 2px 0 0 #d3a03f; }
.ol-caret { width: 14px; flex: 0 0 14px; background: none; border: 0; padding: 0; color: rgba(255,255,255,.5); font-size: 10px; line-height: 1; cursor: pointer; transition: transform .12s ease; }
.ol-caret.ol-open { transform: rotate(90deg); }
.ol-caret.ol-leaf { cursor: default; }
.ol-icon { width: 18px; height: 18px; flex: 0 0 18px; display: inline-grid; place-items: center; border-radius: 5px; font-size: 11px; line-height: 1; color: #111; background: #8a8f86; }
.ol-icon--asset { background: #d3a03f; }
.ol-icon--group { background: #5d6168; color: #eee; }
.ol-icon--link { background: #7fa7d9; }
.ol-icon--geo { background: #9ccf8a; }
.ol-icon--decal { background: #c6e3b8; }
.ol-icon--joint { background: #e6a24a; }
.ol-icon--fixed { background: #8b8378; }
.ol-icon--locator { background: #d985c3; }
.ol-icon--material { background: #c9a8e8; }
.ol-icon--light { background: #f0dc8a; }
.ol-icon--camera, .ol-icon--set { background: #9aa0a8; }
.ol-name { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ol-asset > .ol-line .ol-name, .ol-group > .ol-line .ol-name { font-family: inherit; font-weight: 600; letter-spacing: .02em; }
.ol-meta { font-size: 10.5px; line-height: 1.35; opacity: .55; padding: 0 6px 3px 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-kids .ol-meta { padding-left: 40px; }
.ol-dim > .ol-line { opacity: .6; }
.ol-dim > .ol-meta { opacity: .4; }
.ol-joint > .ol-line .ol-name { color: #f2c27a; }
.av-flash { animation: av-flash 1.2s ease; }
@keyframes av-flash { 0% { background: rgba(211,160,63,.35); } 100% { background: transparent; } }
.av-node { padding: 3px 0; border-radius: 6px; }
.av-node--picked { background: rgba(211,160,63,.18); }
.av-node-btn { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 2px 4px; }
.av-node-btn:hover { text-decoration: underline; }
.av-joint { display: block; font-size: 11px; opacity: .75; padding-left: 8px; }
.av-param { margin: 6px 0 12px 0; }
.av-param-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.av-param-val { opacity: .8; font-variant-numeric: tabular-nums; }
/* a record control a joint moved past since (web/asset_viewer.js syncControls): its value reads "-" */
.av-param[data-stale] .av-param-val { opacity: .45; }
.av-slider { width: 100%; }
.av-sub-label { display: flex; justify-content: space-between; font-size: 10.5px; opacity: .6; text-transform: lowercase; margin: 4px 0 1px 0; }
.av-play { width: 100%; margin: 6px 0; }
.av-clip-note { font-size: 11px; }
.av-look { width: 100%; margin-top: 4px; margin-bottom: 10px; }
.av-mix .av-param-label { text-transform: capitalize; }
.av-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.av-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); padding: 0; cursor: pointer; }
.av-swatch--on { border-color: var(--color-accent-400, #d3a03f); box-shadow: 0 0 0 2px rgba(211,160,63,.35); }
.av-swatch-well { width: 26px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.av-mode { font: inherit; font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: none; color: inherit; cursor: pointer; opacity: .7; }
.av-mode--on { border-color: var(--color-accent-400, #d3a03f); opacity: 1; }
@media (max-width: 800px) {
  .av { grid-template-columns: 1fr; grid-template-rows: auto minmax(280px, 50vh) auto; }
}