/* ============================================================
   Claudedicted — myos-loop.css
   The "MYOS loop" diagram: READ (load context) → SAVE (learn).
   Scoped under .myos-loop / [data-myos-loop]. Built on the design
   tokens (tokens.css); pairs with myos-loop.js.
   ============================================================ */

.myos-loop .cd-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.myos-loop__card{padding:clamp(18px,3vw,30px);}
.mloop-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,26%,210px);gap:clamp(16px,4vw,48px);align-items:center;min-height:330px;}
.mloop-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible;}

.mloop-folders{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;}
.mloop-folder{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;border:1px solid var(--border-hairline);background:var(--surface-glass);transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out),transform .25s var(--ease-out),opacity .25s var(--ease-out);}
.mloop-folder__ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--border-strong);color:var(--accent-bright);}
.mloop-folder__ico svg{width:18px;height:18px;stroke:currentColor;}
.mloop-folder__txt{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.mloop-folder__name{font-weight:var(--fw-bold);font-size:15px;color:var(--text-primary);letter-spacing:-0.01em;}
.mloop-folder__q{font-size:12.5px;color:var(--text-faint);}
.mloop-folder__pip{margin-left:auto;flex:none;font-size:11px;font-weight:var(--fw-extrabold);color:var(--accent-bright);border:1px solid var(--border-accent);border-radius:999px;padding:2px 8px;opacity:0;transform:scale(.7);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);}

/* READ active: folders light up */
[data-myos-loop][data-state="read"] .mloop-folder{border-color:var(--border-accent);box-shadow:0 0 18px rgba(124,111,240,.18);}
[data-myos-loop][data-state="read"] .mloop-folder__ico{color:var(--text-primary);box-shadow:0 0 14px rgba(124,111,240,.4);}
/* SAVE active: only Notes lights up + pip */
[data-myos-loop][data-state="save"] .mloop-folder--notes{border-color:var(--border-accent);box-shadow:0 0 26px rgba(124,111,240,.4);transform:translateX(5px);}
[data-myos-loop][data-state="save"] .mloop-folder--notes .mloop-folder__ico{color:var(--text-primary);box-shadow:0 0 14px rgba(124,111,240,.45);}
[data-myos-loop][data-state="save"] .mloop-folder--notes .mloop-folder__pip{opacity:1;transform:scale(1);}

/* Core */
.mloop-core{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}
.mloop-core__ring{display:grid;place-items:center;border-radius:50%;padding:16px;transition:filter .3s var(--ease-out);filter:grayscale(.55) brightness(.8);}
.mloop-core .cd-mark{transition:box-shadow .35s var(--ease-out);}
[data-myos-loop][data-state="read"] .mloop-core__ring,
[data-myos-loop][data-state="know"] .mloop-core__ring,
[data-myos-loop][data-state="save"] .mloop-core__ring{filter:none;}
[data-myos-loop][data-state="know"] .mloop-core .cd-mark{box-shadow:0 0 40px rgba(124,111,240,.9),inset 0 0 18px rgba(124,111,240,.4);}
.mloop-core__label{font-weight:var(--fw-extrabold);font-size:clamp(16px,2.4vw,19px);letter-spacing:-0.02em;color:var(--text-primary);}
.mloop-core__sub{font-size:13px;color:var(--text-muted);max-width:22ch;line-height:1.45;min-height:2.6em;}

/* Wires / beams */
.mloop-beam{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:.16;transition:opacity .3s var(--ease-out),stroke .3s var(--ease-out);}
[data-myos-loop][data-state="read"] .mloop-beam--read{opacity:.95;stroke:var(--accent-bright);stroke-dasharray:5 9;animation:mloop-flow .9s linear infinite;}
.mloop-beam--save{stroke:var(--accent-bright);stroke-width:2.6;opacity:0;}
[data-myos-loop][data-state="save"] .mloop-beam--save{opacity:1;stroke-dasharray:5 9;animation:mloop-flow .9s linear infinite;}
.mloop-beam--save-head{fill:var(--accent-bright);opacity:0;transition:opacity .3s var(--ease-out);}
[data-myos-loop][data-state="save"] .mloop-beam--save-head{opacity:1;}
@keyframes mloop-flow{to{stroke-dashoffset:-28;}}

/* Controls */
.mloop-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--border-hairline);}
.mloop-play{gap:8px;}
.mloop-play__icon{width:9px;height:11px;flex:none;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);} /* triangle = play */
[data-myos-loop][data-playing="true"] .mloop-play__icon{clip-path:none;width:8px;height:10px;background:none;border-left:3px solid currentColor;border-right:3px solid currentColor;} /* bars = pause */
.mloop-steps{display:flex;gap:8px;flex-wrap:wrap;}
.mloop-step{font-family:var(--font-sans);font-size:12.5px;font-weight:var(--fw-bold);letter-spacing:.02em;color:var(--text-muted);background:transparent;border:1px solid var(--border-hairline);border-radius:999px;padding:7px 14px;cursor:pointer;transition:all .2s var(--ease-out);}
.mloop-step:hover{color:var(--text-primary);border-color:var(--border-strong);}
.mloop-step[aria-selected="true"]{color:var(--text-primary);border-color:var(--border-accent);background:rgba(124,111,240,.14);box-shadow:0 0 14px rgba(124,111,240,.22);}
.mloop-step:focus-visible,.mloop-play:focus-visible{outline:none;box-shadow:var(--glow-focus);}

/* Legend */
.mloop-legend{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:18px;}
.mloop-legend__item{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-muted);line-height:1.45;}
.mloop-legend__item strong{color:var(--text-secondary);letter-spacing:.12em;font-size:12px;}
.mloop-legend__dot{flex:none;width:11px;height:11px;margin-top:3px;border-radius:50%;}
.mloop-legend__item--read .mloop-legend__dot{background:var(--accent-bright);box-shadow:0 0 10px rgba(124,111,240,.6);}
.mloop-legend__item--save .mloop-legend__dot{background:transparent;border:2px solid var(--accent-bright);box-shadow:0 0 10px rgba(124,111,240,.5);}

/* Mobile: stack folders above core, beams recompute in JS */
@media (max-width:680px){
  .mloop-stage{grid-template-columns:1fr;gap:26px;}
  .mloop-core{order:2;}
  .mloop-folders{order:1;}
  .mloop-legend{grid-template-columns:1fr;}
  .mloop-folder__q{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .mloop-beam--read,.mloop-beam--save{animation:none!important;}
}