/* Agents board, agent mind view and Found so far. Theme tokens only: motion is the addition. */
.col.agwide { width: min(1120px, 100%); }
.agtop { margin-top: 28px; }
.agtop:first-child { margin-top: 24px; }
.agpow { display: flex; gap: 8px; flex-wrap: wrap; }
.grow { flex: 1; }

/* how the agents work together */
.collab { background: var(--bg-card); border-radius: 16px; box-shadow: var(--shadow-card); padding: 18px 18px 14px; }
.cgrid { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1.3fr) 84px minmax(0, 1fr); align-items: center; }
.cgrid.tethers { align-items: stretch; margin: 2px 0; }
.tcell { display: flex; justify-content: center; gap: 22px; height: 30px; }
.cnode { position: relative; background: var(--bg); border-radius: 12px; box-shadow: var(--shadow-card); padding: 12px 14px; min-height: 92px; transition: box-shadow .3s ease, transform .3s ease; }
.cnode.hotn, .cmem.hotn { box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 50%, transparent), 0 6px 22px color-mix(in srgb, var(--blue) 16%, transparent); transform: translateY(-1px); }
.cn-h { font-size: 14px; line-height: 20px; font-weight: 500; }
.cn-d { font-size: 12px; line-height: 16px; color: var(--text-3); }
.cn-s { font-size: 13px; line-height: 20px; color: var(--text-2); margin-top: 8px; }
.cn-dots { display: flex; gap: 6px; margin-top: 8px; }
.carrow { position: relative; display: flex; align-items: center; justify-content: center; }
.carrow.h { height: 36px; margin: 0 6px; }
.carrow.v { width: 14px; height: 30px; flex-direction: column; }
.cline { position: absolute; background: repeating-linear-gradient(90deg, var(--line-3) 0 4px, transparent 4px 9px); background-size: 9px 1px; animation: cflow 1.1s linear infinite; }
.carrow.h .cline { left: 0; right: 7px; height: 1px; top: 50%; }
.carrow.v .cline { top: 0; bottom: 7px; left: 50%; width: 1px; background: repeating-linear-gradient(180deg, var(--line-3) 0 4px, transparent 4px 9px); background-size: 1px 9px; animation-name: cflowv; }
.carrow.v.rev .cline { animation-direction: reverse; top: 7px; bottom: 0; }
.chead { position: absolute; width: 0; height: 0; border: 4px solid transparent; }
.carrow.h .chead { right: 0; top: calc(50% - 4px); border-left: 6px solid var(--line-3); border-right: 0; }
.carrow.v .chead { bottom: 0; left: 0; border-top: 6px solid var(--line-3); border-bottom: 0; }
.carrow.v.rev .chead { bottom: auto; top: 0; border-top: 0; border-bottom: 6px solid var(--line-3); }
.carrow.hot .cline { background: var(--blue); animation: none; opacity: .8; }
.carrow.hot.h .cline { height: 2px; }
.carrow.hot.v .cline { width: 2px; }
.carrow.hot.h .chead { border-left-color: var(--blue); }
.carrow.hot.v .chead { border-top-color: var(--blue); }
.carrow.hot.v.rev .chead { border-bottom-color: var(--blue); border-top-color: transparent; }
.cdot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); animation: cdot-h 1s ease-in-out both; }
.carrow.h .cdot { top: calc(50% - 4px); left: 0; }
.carrow.v .cdot { left: 3px; top: 0; animation-name: cdot-v; }
.carrow.v.rev .cdot { animation-name: cdot-vr; }
.clab { position: absolute; top: calc(50% + 6px); font-size: 11px; line-height: 14px; color: var(--text-3); white-space: nowrap; }
@keyframes cflow { to { background-position: 9px 0; } }
@keyframes cflowv { to { background-position: 0 9px; } }
@keyframes cdot-h { from { left: 0; opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
@keyframes cdot-v { from { top: 0; opacity: 1; } to { top: calc(100% - 8px); opacity: 0; } }
@keyframes cdot-vr { from { top: calc(100% - 8px); opacity: 1; } to { top: 0; opacity: 0; } }
.cmem { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--bg); border-radius: 12px; box-shadow: var(--shadow-card); padding: 10px 14px; transition: box-shadow .3s ease; }
.cm-t { font-size: 13px; color: var(--text-3); flex: 1; min-width: 180px; }
.cm-n { font-size: 13px; color: var(--text-2); }
.cinfo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; margin-top: 10px; }
.cinfo .spmark { margin: 0; }

/* agent cards */
.acards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.acard { display: flex; flex-direction: column; gap: 10px; background: var(--bg-card); border-radius: 14px; box-shadow: var(--shadow-card); padding: 16px; cursor: pointer; outline: none; position: relative; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; }
.acard:hover, .acard:focus-visible { box-shadow: var(--shadow-card), var(--shadow-float); transform: translateY(-2px); }
.acard:focus-visible { box-shadow: 0 0 0 2px var(--line-focus); }
.acard.live::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--blue) 7%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: sweep 3.4s ease-in-out infinite; }
.ac-h { display: flex; align-items: center; gap: 10px; }
.ac-who { display: flex; flex-direction: column; min-width: 0; }
.ac-name { font-size: 15px; line-height: 20px; font-weight: 500; }
.ac-name:hover { text-decoration: underline; }
.ac-role { font-size: 12px; line-height: 16px; color: var(--text-3); }
.ac-does { margin: 0; font-size: 13px; line-height: 19px; color: var(--text-3); }
.ac-think { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; min-width: 0; }
.ac-think .spmark { flex: none; opacity: .85; }
.ac-think .t-think { min-width: 0; flex: 1; }
.ac-quote { margin: 0; font-size: 13px; line-height: 19px; color: var(--text-2); border-left: 2px solid var(--line-3); padding-left: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ac-k { display: block; font-size: 11px; line-height: 16px; color: var(--text-3); text-transform: none; margin-bottom: 4px; }
.ac-sec { margin-top: 2px; }
.pblock .pb-n, .now-r .pb-n { font-size: 13px; line-height: 20px; font-weight: 500; margin-bottom: 6px; }
.pblock.faint { font-size: 13px; }
.pstrip { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 6px; border-radius: 9999px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text-1); font-size: 12px; line-height: 16px; cursor: pointer; max-width: 100%; transition: background .12s, border-color .12s; }
.pchip:hover:not(.static) { background: var(--fill-2); border-color: var(--line-3); }
.pchip.static { cursor: default; padding-left: 9px; color: var(--text-2); }
.pchip .pl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchip .pat { color: var(--text-3); }
.vdot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-4); }
.vdot.good { background: var(--green); } .vdot.noise { background: var(--amber); } .vdot.bad { background: var(--red); }
.ac-stats, .mh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 0 2px; border-top: 1px solid var(--line-1); }
.ac-stats > div, .mh-stats > div { display: flex; flex-direction: column; min-width: 0; }
.ac-stats b, .mh-stats b { font: 400 20px/26px var(--serif); }
.ac-stats span, .mh-stats span { font-size: 11px; line-height: 14px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-spark { display: flex; align-items: center; gap: 10px; }
.ac-spark .spark { flex: 1; min-width: 0; }
.ac-sl { font-size: 11px; flex: none; }
.spark { color: var(--text-3); display: block; overflow: visible; }
.spark.none { font-size: 12px; line-height: 32px; }
.sp-line { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: spdraw 1s ease-out .2s forwards; }
.sp-dot { fill: var(--text-3); }
.sp-dot.best { fill: var(--green); } .sp-dot.bad { fill: var(--red); }
.sp-dot.last { fill: var(--blue); animation: breathe-dot 1.8s ease-in-out infinite; }
@keyframes spdraw { to { stroke-dashoffset: 0; } }
@keyframes breathe-dot { 50% { opacity: .45; } }
.ac-f { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.powered.sm { height: 22px; font-size: 11px; padding: 0 8px 0 6px; gap: 5px; }
.powered.sm .spmark { margin: 0; }

/* the mind view */
.mind-hd { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.mind-hd .mh-t { flex: 1; min-width: 260px; }
.mind-hd .ahd { margin-top: 0; flex-wrap: wrap; }
.mh-stats { border-top: 0; padding: 0; gap: 22px; }
.nowcard { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; background: var(--bg-card); border-radius: 14px; box-shadow: var(--shadow-card); padding: 18px; }
.nowcard:not(:has(.now-r)) { grid-template-columns: 1fr; }
.now-line { font-size: 16px; line-height: 24px; font-weight: 500; }
.now-why { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 8px; margin-top: 12px; font-size: 14px; line-height: 22px; color: var(--text-2); }
.now-why .k, .now-next .k { font-size: 12px; line-height: 22px; color: var(--text-3); }
.now-ts { grid-column: 2; font-size: 11px; }
.now-next { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; margin-top: 12px; font-size: 14px; line-height: 21px; }
.now-next ul { margin: 0; padding: 0 0 0 16px; color: var(--text-2); }
.now-r { min-width: 0; }
.mind3d { height: 200px; margin-bottom: 10px; }
.steptrail { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; padding: 0; margin: 10px 0 0; font-size: 12px; line-height: 16px; color: var(--text-3); }
.steptrail li { display: inline-flex; align-items: center; gap: 6px; }
.st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-4); }
.steptrail .past { color: var(--text-2); } .steptrail .past .st-dot { background: var(--green); }
.steptrail .now { color: var(--text-1); font-weight: 500; } .steptrail .now .st-dot { background: var(--blue); animation: breathe 1.6s ease-out infinite; }
.attempts { display: flex; flex-direction: column; gap: 12px; }
.attempt { background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow-card); padding: 12px 14px; }
.attempt.open { box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 40%, transparent); }
.at-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; line-height: 22px; }
.at-n { font-size: 12px; }
.at-t { font-weight: 500; min-width: 0; max-width: 46%; }
.at-sc { font-size: 14px; }
.tl-steps { margin-top: 8px; display: flex; flex-direction: column; }
.tl-step { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto 62px; gap: 10px; padding: 4px 0; font-size: 13px; line-height: 20px; border-top: 1px solid var(--line-1); align-items: start; }
.tl-s { font-size: 11px; line-height: 20px; color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; }
.tl-x { color: var(--text-2); overflow-wrap: anywhere; }
.tl-step.think .tl-x { color: var(--text-1); }
.tl-r { font-size: 12px; white-space: nowrap; text-align: right; }
.tl-t { font-size: 11px; text-align: right; }
.at-ev { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-1); font-size: 12px; }
.fchip { display: inline-flex; gap: 5px; align-items: baseline; padding: 2px 8px; border-radius: 9999px; border: 1px solid var(--line-2); font-size: 12px; line-height: 16px; }
.at-lesson { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--fill-2); font-size: 13px; line-height: 20px; color: var(--text-1); }
.lgrid, .fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.lcard { background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow-card); padding: 12px 14px; animation: reveal .5s cubic-bezier(.2, .8, .2, 1) both; }
.lc-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 6px; }
.lc-t { font-size: 14px; line-height: 20px; font-weight: 500; }
.lc-b { font-size: 13px; line-height: 19px; color: var(--text-2); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lc-f { display: flex; gap: 14px; margin-top: 8px; }
.ptwrap { overflow-x: auto; background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow-card); }
.ptable { min-width: 560px; }
.ptable th, .ptable td { padding: 9px 12px; font-size: 13px; line-height: 20px; text-align: left; border-bottom: 1px solid var(--line-1); }
.ptable th.r, .ptable td.r { text-align: right; }
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptr { cursor: pointer; transition: background .12s; }
.ptr:hover, .ptr:focus-visible { background: var(--fill-1); outline: none; }
.ptr.nolink { cursor: default; }
.thbtn { border: 0; background: none; color: var(--text-3); font: inherit; font-size: 12px; cursor: pointer; padding: 0; }
.thbtn:hover, .thbtn.on { color: var(--text-1); }
.thbtn .arr { margin-left: 4px; }
.pt-n, .at-prog { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.at-prog { display: flex; }
.at-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.vbar { display: inline-flex; width: 70px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--fill-3); vertical-align: middle; margin-right: 8px; }
.vbar i { display: block; height: 100%; }
.vbar i.g { background: var(--green); } .vbar i.n { background: var(--amber); } .vbar i.b { background: var(--red); } .vbar i.u { background: var(--fill-3); }
.vcount { display: inline-block; min-width: 28px; }
.sp3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.spcard { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow-card); padding: 12px 14px; font-size: 13px; line-height: 19px; }
.mind .ascroll { padding-bottom: 32px; }

/* nudge dock */
.nudgedock { background: var(--bg); border-top: 1px solid var(--line-2); padding-top: 10px; }
.nd-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.nd-t { font-size: 14px; font-weight: 500; }
.sugs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.sugs::-webkit-scrollbar { display: none; }
.sug { flex: none; border: 1px solid var(--line-2); background: var(--bg-card); border-radius: 9999px; padding: 4px 12px; font-size: 13px; line-height: 20px; color: var(--text-2); cursor: pointer; transition: background .12s, color .12s, transform .12s; }
.sug:hover { background: var(--fill-2); color: var(--text-1); transform: translateY(-1px); }
.nd-list { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.nd-i { display: inline-flex; align-items: center; gap: 6px; }

/* found so far */
.fnd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.fh2 { font: 400 20px/28px var(--serif); margin: 0 0 2px; }
.fhero .fh-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; background: var(--bg-card); border-radius: 14px; box-shadow: var(--shadow-card); padding: 18px; }
.fh-name { font-size: 16px; line-height: 24px; font-weight: 500; margin-bottom: 4px; }
.fh-score { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 14px; }
.fh-h { font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.fh-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 19px; }
.fh-list li { display: flex; align-items: center; gap: 7px; }
.fh-act { display: flex; gap: 16px; align-items: center; margin-top: 12px; }
.fstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.fstat { text-align: left; border: 0; background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow-card); padding: 12px 14px; cursor: pointer; color: inherit; font: inherit; transition: box-shadow .15s, transform .15s; }
.fstat:hover { transform: translateY(-1px); }
.fstat.on { box-shadow: 0 0 0 1.5px var(--text-1); }
.fs-n { display: block; font: 400 28px/34px var(--serif); }
.fs-n.g { color: var(--green-t); } .fs-n.r { color: var(--red-t); } .fs-n.b { color: var(--blue-t); }
.fs-l { font-size: 12px; color: var(--text-3); }
.fbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchipbtn { height: 28px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--line-2); background: none; color: var(--text-2); font-size: 13px; cursor: pointer; transition: background .12s; }
.fchipbtn:hover { background: var(--fill-1); }
.fchipbtn.on { background: var(--fill-2); color: var(--text-1); border-color: var(--line-3); }
.fsort { margin-left: auto; font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }
.fsort select { background: var(--bg); color: var(--text-1); border: 1px solid var(--line-2); border-radius: 8px; padding: 3px 6px; font-size: 12px; }
.fcard { background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow-card); padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fcard.fresh { animation: fresh-in .6s cubic-bezier(.2, .8, .2, 1) both, fresh-glow 3.2s ease-out .4s; }
@keyframes fresh-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fresh-glow { 0%, 30% { box-shadow: var(--shadow-card), 0 0 0 2px color-mix(in srgb, var(--blue) 55%, transparent), 0 8px 26px color-mix(in srgb, var(--blue) 22%, transparent); } 100% { box-shadow: var(--shadow-card); } }
.fc-top { display: flex; align-items: center; gap: 8px; }
.fc-ago { font-size: 12px; }
.fc-t { margin: 2px 0 0; font-size: 15px; line-height: 21px; font-weight: 500; }
.fc-b { margin: 0; font-size: 13px; line-height: 19px; color: var(--text-2); }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-ag { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.fag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }
.fag:hover { color: var(--text-1); text-decoration: underline; }
.fag .av { border-radius: 5px; }
.fev { margin-top: auto; padding-top: 6px; }
.fev-btns { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fev-btns .linkbtn { font-size: 13px; }
.fev-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 18px; color: var(--text-2); }
.fev-row { display: grid; grid-template-columns: 60px 70px minmax(0, 1fr); gap: 8px; }
.fev-t { color: var(--text-3); }
.fev-a { color: var(--text-1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

@media (max-width: 900px) {
  .cgrid { grid-template-columns: 1fr; gap: 0; }
  .cgrid .carrow.h { transform: rotate(90deg); height: 36px; width: 60px; margin: 18px auto; }
  .cgrid.tethers { display: none; }
  .nowcard, .fhero .fh-card { grid-template-columns: 1fr; }
  .fstats { grid-template-columns: repeat(2, 1fr); }
  .tl-step { grid-template-columns: 70px minmax(0, 1fr); }
  .tl-r, .tl-t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cline, .cdot, .acard.live::after, .sp-line, .sp-dot.last, .steptrail .now .st-dot, .fcard.fresh, .lcard { animation: none; }
  .sp-line { stroke-dashoffset: 0; }
}