/* graphs.sgit.ai — the WCLM experiment (brief 31): the deterministic
   transformer's page. Columns are layers, arcs are attention and look-back,
   stroke width is weight. Deliberately separate from the reader's CSS. */

.wc-ask { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .8rem 0 1rem; }
.wc-ask input { font: inherit; font-size: .95rem; padding: .4rem .7rem; min-width: 20rem;
  border: 1px solid var(--line2, #ccc); border-radius: 8px; flex: 0 1 26rem; }
.wc-ask button { font: inherit; font-size: .85rem; padding: .4rem 1rem; cursor: pointer;
  border: 1px solid #2a9d8f; border-radius: 8px; background: #2a9d8f; color: #fff; font-weight: 700; }

.wc-cols { position: relative; display: flex; gap: 2.2rem; align-items: flex-start;
  overflow-x: auto; padding: .6rem .2rem 1rem; border: 1px solid var(--line2, #ddd);
  border-radius: 10px; background: #fff; }
.wc-col { flex: 1 0 13rem; min-width: 12rem; display: flex; flex-direction: column;
  gap: .35rem; padding: .3rem .4rem; position: relative; z-index: 2; }
.wc-lh { margin-bottom: .3rem; }
.wc-lh b { display: block; font-size: .78rem; }
.wc-lh .small { display: block; line-height: 1.3; }

.wc-chip { border: 1px solid var(--line2, #d5d8de); border-radius: 8px; background: #fff;
  padding: .25rem .5rem; font-size: .76rem; line-height: 1.35; }
.wc-chip code { display: block; font-size: .62rem; color: #8a8f98; }
.wc-chip .small { display: block; font-size: .64rem; color: #667; }
.wc-tok { border-left: 4px solid #8fa7e0; }
.wc-res { border-left: 4px solid #2a9d8f; }
.wc-res.ctc-padding { opacity: .5; }
.wc-res.ctc-verb b { font-style: italic; }
.wc-res.ctc-unknown { border-left-color: #c9ccd2; }
.wc-phrase { border-style: dashed; margin-top: .4rem; }
.wc-pair { border-left: 4px solid #c58f00; }
.wc-pull { border-left: 4px solid #e4d9b8; font-size: .7rem; }
.wc-bind { border-left: 4px solid #3f6ad8; }
.wc-bind.wc-pack { border-left-color: #9b59b6; }
.wc-exp { border-left: 4px solid #c9ccd2; font-size: .72rem; }
.wc-conv { border-left: 4px solid #2f9e63; }
.wc-conv.on { background: rgba(47, 158, 99, .12); font-weight: 600; }

.wc-wires { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wc-wires path { fill: none; }
.wc-wires .wc-line { stroke: rgba(42, 157, 143, .45); }
.wc-wires .wc-dimline { stroke: rgba(150, 155, 165, .3); }
.wc-wires .wc-docline { stroke: rgba(63, 106, 216, .4); }
.wc-wires .wc-packline { stroke: rgba(155, 89, 182, .4); }

.wc-card { margin-top: 1rem; border: 1px solid var(--line2, #ddd); border-radius: 10px;
  padding: .8rem 1rem; background: var(--panel2, #fafafa); }
.wc-card h3 { margin: 0 0 .4rem; font-size: 1rem; }

@media (max-width: 760px) {
  .wc-cols { gap: 1.2rem; }
  .wc-col { flex: 1 0 11rem; min-width: 10rem; }
  .wc-ask input { min-width: 0; flex: 1 1 100%; }
}

/* ---- brief 32: explanations, impact, examples ----------------------------- */
.wc-ex { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin: -.4rem 0 .8rem; }
.wc-exb { font: inherit; font-size: .7rem; padding: .16rem .55rem; cursor: pointer;
  border: 1px solid var(--line2, #ccc); border-radius: 999px; background: #fff; }
.wc-exb:hover { border-color: #2a9d8f; }
.wc-delta { margin: 0 0 .5rem; padding: .3rem .6rem; border-left: 3px solid #c58f00;
  background: rgba(240, 180, 41, .1); border-radius: 4px; }
.wc-wrap { display: flex; gap: .8rem; align-items: stretch; }
.wc-wrap .wc-cols { flex: 1 1 auto; min-width: 0; }
.wc-side { flex: 0 0 300px; border: 1px solid var(--line2, #ddd); border-radius: 10px;
  background: var(--panel2, #fafafa); padding: .6rem .8rem; font-size: .8rem;
  max-height: 80vh; overflow: auto; }
.wc-sh b { display: block; }
.wc-side h6 { margin: .8rem 0 .25rem; font-size: .64rem; text-transform: uppercase;
  letter-spacing: .05em; color: #667; }
.wc-hop { padding: .18rem .4rem; border-radius: 6px; cursor: pointer; }
.wc-hop:hover { background: rgba(42, 157, 143, .1); }
.wc-hoplab { display: block; font-weight: 600; }
.wc-hop .small { display: block; padding-left: 1.05rem; }
.wc-chip[data-c] { cursor: pointer; }
.wc-chip.wc-sel { outline: 2px solid #2a9d8f; outline-offset: 1px; }
.wc-chip.wc-new { box-shadow: 0 0 0 2px rgba(240, 180, 41, .8); position: relative; }
.wc-chip.wc-new::after { content: 'new'; position: absolute; top: -7px; right: -4px;
  font-size: .54rem; font-weight: 700; background: #c58f00; color: #fff;
  border-radius: 6px; padding: 0 .3em; }
.wc-lh { cursor: pointer; border-radius: 6px; padding: .1rem .2rem; }
.wc-lh:hover { background: rgba(42, 157, 143, .08); }
.wc-wires .wc-hot { stroke: rgba(42, 157, 143, .95) !important; }
.wc-wires .wc-cold { opacity: .18; }
@media (max-width: 900px) {
  .wc-wrap { flex-direction: column; }
  .wc-side { flex: none; max-height: 40vh; }
}

/* ---- brief 33: the detective playbook ------------------------------------- */
.wc-pipe { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; margin: -.3rem 0 .5rem; }
.wc-blk { font-size: .68rem; padding: .14rem .5rem; border-radius: 7px; cursor: pointer;
  border: 1px solid #2a9d8f; background: rgba(42,157,143,.12); user-select: none; }
.wc-blk-core { cursor: default; border-style: solid; font-weight: 600; }
.wc-blk-off { opacity: .4; border-color: var(--line2, #ccc); background: #fff; text-decoration: line-through; }
.wc-blk-skip { border-color: #c58f00; background: rgba(240,180,41,.15); }
.wc-pass { font-size: .68rem; padding: .12rem .5rem; opacity: .75; }
.wc-fix { border-left: 4px solid #2a9d8f; background: rgba(42,157,143,.08); }
.wc-op { border-left: 4px solid #b06060; }
.wc-neg { border-left-color: #b06060 !important; }
.wc-att { border-left: 4px solid #c58f00; }
.wc-asm { border-left: 4px solid #8fa7e0; }
.wc-asm.wc-pack { border-left-color: #9b59b6; }
.wc-chip.wc-fade { opacity: .25; }
.wc-wires .wc-pairline { stroke: rgba(197, 143, 0, .55); }
.wc-note { border-left: 3px solid #b06060; background: rgba(176, 96, 96, .08);
  padding: .35rem .6rem; border-radius: 4px; font-size: .84rem; }

/* ---- brief 34: senses, number, layers of engines -------------------------- */
.wc-lay { display: inline-flex; gap: .25rem; padding: .12rem; border-radius: 9px; }
.wc-lay-multi { border: 1px dashed rgba(42,157,143,.55); background: rgba(42,157,143,.05); }
.wc-gap { display: inline-block; width: .5rem; height: 1.3rem; border-radius: 3px; vertical-align: middle; }
.wc-gap:hover { background: rgba(42,157,143,.25); }
.wc-senses { display: flex; gap: .5rem .9rem; align-items: center; flex-wrap: wrap; margin: .35rem 0 .55rem; }
.wc-sw { display: inline-flex; gap: .25rem; align-items: center; }
.wc-so { font-size: .66rem; padding: .1rem .45rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line2, #ccc); background: #fff; }
.wc-so.on { border-color: #2a9d8f; background: rgba(42,157,143,.14); font-weight: 600; }
.wc-sn { border-left: 4px solid #4a7fb5; }
.wc-sn.wc-foreign { border-left-color: #9b59b6; background: rgba(155,89,182,.08); }
.wc-bind.wc-sense { border-left: 4px solid #9b59b6; }
.wc-col-multi .wc-eng + .wc-eng { margin-top: .8rem; padding-top: .6rem;
  border-top: 1px dashed rgba(42,157,143,.4); }
.wc-frac { border-left: 4px solid #2a6db5; background: rgba(42,109,181,.07); }
.wc-tran { border-left: 4px solid #b0761f; background: rgba(176,118,31,.06); }
.wc-tranline { border-left: 3px solid #b0761f; padding-left: .5rem; }
.wc-aud { margin-top: -.25rem; }

/* ---- brief 36: the operator folders, explorer and workbench --------------- */
.fx-wrap { display: flex; min-height: 70vh; border: 1px solid var(--line2, #ddd); border-radius: 10px; overflow: hidden; }
.fx-body { flex: 1 1 auto; min-width: 0; padding: .6rem .9rem; overflow: auto; }
.fx-dir { padding: .4rem .7rem .25rem; cursor: pointer; font-size: .78rem; border-top: 1px solid var(--line2, #eee); }
.fx-dir:hover, .fx-dir.on { background: rgba(42,157,143,.06); }
.op-head { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: .6rem; }
.op-flow { flex: 0 0 auto; }
.op-flow text { font-size: 11px; fill: currentColor; }
.op-flow path { stroke: #6a8; fill: none; stroke-width: 1.4; }
.op-flow marker path { fill: #6a8; stroke: none; }
.op-flow .op-f-type { fill: rgba(74,127,181,.12); stroke: #4a7fb5; }
.op-flow .op-f-op { fill: rgba(42,157,143,.14); stroke: #2a9d8f; }
.op-ctl { display: flex; gap: .5rem; margin: .4rem 0; }
.op-ctl input { flex: 1 1 auto; font: inherit; padding: .4rem .6rem; border: 1px solid var(--line2, #ccc); border-radius: 8px; }
.op-ctl button { font: inherit; font-size: .78rem; padding: .3rem .8rem; border-radius: 8px;
  border: 1px solid #2a9d8f; background: rgba(42,157,143,.12); cursor: pointer; }
.op-ex { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .6rem; }
.op-preset { border-color: #9b59b6; }
.op-cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: start; }
.op-pane { border: 1px solid var(--line2, #ddd); border-radius: 10px; padding: .5rem .7rem; min-width: 0; overflow: auto; }
.op-pane h4 { margin: 0 0 .1rem; }
.op-sub { margin: .4rem 0; }
.op-k { font-weight: 700; }
.op-sub .fv-raw { max-height: 16rem; overflow: auto; font-size: .68rem; }
.op-mid { align-self: center; }
.op-box { border: 2px solid #2a9d8f; border-radius: 12px; padding: .6rem .8rem; max-width: 15rem;
  background: rgba(42,157,143,.06); }
.op-box.op-skip { border-color: #c58f00; background: rgba(240,180,41,.1); }
.op-dbg { margin-top: .8rem; }
.op-dbg .fv-raw { max-height: 24rem; overflow: auto; font-size: .66rem; }
.op-vec { padding: .3rem .5rem; border-radius: 6px; margin: .2rem 0; }
.op-vec.ok { background: rgba(42,157,143,.08); }
.op-vec.bad { background: rgba(176,96,96,.12); }
.fv-com { color: #7a8; font-style: italic; }
@media (max-width: 900px) {
  .op-cols { grid-template-columns: 1fr; }
  .fx-wrap { flex-direction: column; }
  .fx-tree { flex: none; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--line2, #ddd); }
}

/* ---- brief 36 addendum: the explorer's overview + real renders ------------ */
.ov-flow { display: flex; flex-wrap: wrap; gap: .25rem .15rem; align-items: center;
  padding: .6rem .4rem; border: 1px solid var(--line2, #ddd); border-radius: 10px;
  margin-bottom: .4rem; }
.ov-arr { font-size: .66rem; color: #667; white-space: nowrap; }
.ov-arr code { font-size: .64rem; color: #4a7fb5; }
.ov-op { font: inherit; font-size: .74rem; padding: .18rem .55rem; border-radius: 8px;
  cursor: pointer; border: 1px dashed #2a9d8f; background: rgba(42,157,143,.07); }
.ov-op.core { border-style: solid; font-weight: 700; background: rgba(42,157,143,.14); }
.ov-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .6rem; margin-top: .8rem; }
.ov-card { border: 1px solid var(--line2, #ddd); border-radius: 10px; padding: .55rem .7rem; }
.ov-card h4 { margin: 0 0 .2rem; }
.ov-card p { margin: .2rem 0; }
.ov-name { font: inherit; font-weight: 700; cursor: pointer; border: 0; background: none;
  padding: 0; color: #1c7a6e; }
.ov-name:hover { text-decoration: underline; }
.ndoc-f-core { background: rgba(42,157,143,.16); }
.fx-frame { width: 100%; height: 72vh; border: 1px solid var(--line2, #ddd); border-radius: 8px; background: #fff; }
.fx-view h4 { margin: .8rem 0 .25rem; }
.fv-vec { border: 1px solid var(--line2, #eee); border-radius: 8px; padding: .4rem .6rem; margin: .5rem 0; }
.fv-vec p { margin: .1rem 0 .3rem; }

/* ---- brief 37: code anatomy + chip-wired workbenches ---------------------- */
.an-flow { max-width: 100%; margin: .3rem 0 .6rem; }
.an-flow rect { fill: rgba(42,157,143,.07); stroke: #2a9d8f; cursor: pointer; }
.an-flow .an-k-docs rect { stroke: #667; fill: rgba(102,102,119,.07); }
.an-flow .an-k-imports rect { stroke: #4a7fb5; fill: rgba(74,127,181,.08); }
.an-flow .an-k-data rect { stroke: #b0761f; fill: rgba(176,118,31,.08); }
.an-flow .an-k-contract rect { stroke: #9b59b6; fill: rgba(155,89,182,.08); }
.an-flow .an-k-export rect { stroke: #667; fill: rgba(102,102,119,.05); }
.an-flow text { font-size: 11px; fill: currentColor; pointer-events: none; }
.an-flow .an-fl { font-size: 9px; opacity: .55; }
.an-flow .an-farr { stroke: #6a8; fill: none; stroke-width: 1.3; }
.an-flow .an-farr { marker-end: url(#anArr); }
.an-flow marker path { fill: #6a8; stroke: none; }
.an-fbox.on rect { stroke-width: 2.5; fill: rgba(42,157,143,.18); }
.an-cols { display: flex; gap: .9rem; align-items: flex-start; }
.an-code { flex: 1 1 auto; min-width: 0; }
.an-pane { flex: 0 0 21rem; position: sticky; top: .5rem; max-height: 80vh; overflow: auto;
  border: 1px solid var(--line2, #ddd); border-radius: 10px; padding: .5rem .7rem; }
.an-seg { border: 1px solid var(--line2, #ddd); border-left-width: 4px; border-radius: 8px;
  margin: .4rem 0; cursor: pointer; overflow: hidden; }
.an-seg .fv-raw { margin: 0; font-size: .68rem; }
.an-sh { display: flex; gap: .6rem; align-items: baseline; padding: .25rem .6rem;
  background: rgba(42,157,143,.05); border-bottom: 1px solid var(--line2, #eee); }
.an-seg.on { border-color: #2a9d8f; box-shadow: 0 0 0 1px rgba(42,157,143,.4); }
.an-seg.an-k-docs { border-left-color: #667; }
.an-seg.an-k-imports { border-left-color: #4a7fb5; }
.an-seg.an-k-data { border-left-color: #b0761f; }
.an-seg.an-k-contract { border-left-color: #9b59b6; }
.an-seg.an-k-step { border-left-color: #2a9d8f; }
.an-seg.an-k-export { border-left-color: #667; }
.opx { position: relative; }
.opx-wires { position: absolute; inset: 0; pointer-events: none; }
.op-sel { border: 1px solid var(--line2, #ddd); border-radius: 10px; padding: .5rem .7rem; margin-top: .6rem; }
@media (max-width: 900px) {
  .an-cols { flex-direction: column; }
  .an-pane { position: static; flex: none; max-height: none; }
}